gradiente di sfondo con tinta unita

Devo fare quanto segue: La parte superiore del div è un'immagine di un gradiente, quindi in fondo continua come un colore solido. Posso farlo con semplici CSS? So che quanto segue non è valido.gradiente di sfondo con tinta unita

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

Nota: il primo 225px, quale l'immagine si riempie, dovrebbe essere senza il background-color

fonte

2013-07-29 marcias

Per quanto ne so, è necessario utilizzare un gradiente per il colore solido, in modo che è possibile impostare in modo corretto.

Il CSS sarebbe:

.imgbg { 
    width:255px; 
    height:355px; 
    background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8); 
    background-position: 0px 0px, 0px 112px; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 255px 112px, 255px 233px; 
}

Qui è your updated fiddle

suport di base dovrebbe andare bene per i browser che supportano sfondi multipli, l'unico problema sarebbe con IE < = 8. sfondo gradiente potrebbe essere un problema con IE9, ma penso che dovrebbe funzionare (non posso testare IE9). Se fosse davvero un problema, vedi colozilla per una correzione.

fonte

2013-07-29 17:13:32 vals

Beh, questo è davvero qualcosa che sto cercando, solo 2 domande rimanenti: quanto è crossbrowser? In secondo luogo, come funziona in un div altezza dinamica? Lo chiedo perché hai usato una proprietà in background. - Ho appena rimosso quella proprietà, e ha funzionato per me. – marcias

Ho modificato la risposta per includere le informazioni del crossbrowser. A proposito di dimensioni dell'immagine, immagino che non dichiarare la dimensione dell'immagine non dovrebbe essere un problema, e quindi con il gradiente, ma non ne sono proprio sicuro. – vals

vorrei fare le seguenti operazioni:

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

Questo sarà solo mettere il vostro sfondo immagine in cima al div; il resto sarà il colore selezionato per l'intero background del div.

fonte

2013-07-29 12:52:34

Bene, hai provato questo? Sto usando chrome, e mette il colore ovunque, anche sotto l'immagine, dove è trasparente. – marcias

Forse non ho capito la tua domanda, ma cosa c'è di sbagliato nel mettere il colore sotto l'immagine? Se è un gradiente di un colore identico allo sfondo. Controlla questo sito che ho fatto qualche tempo fa: [http://mychinesephrases.com] (http://mychinesephrases.com) dove ho messo il gradiente sull'oggetto 'body'. –

Controlla questo, con la mia immagine in violino. Ora puoi vedere che il colore rosa è sotto l'immagine .imgbg {width: 350px; altezza: 300px; background: # f7d8e8 url ('blue2.hu/danone/nogravity/img/right_column_bg_top.png') Quello che voglio è che il colore rosa debba iniziare solo al di sotto della fine dell'immagine. – marcias

Dai un'occhiata a questo violino e dimmi se questo è quello che vuoi.

FIDDLE

HTML

<div class="imgbg"></div>

CSS

.imgbg { 
    width:255px; 
    height:355px; 
    background:#f7d8e8 url('http://placehold.it/255x255') no-repeat; 
}

fonte

2013-07-29 13:25:24 AnaMaria

Faccio anche un collegamento per questo: http://jsfiddle.net/YPcVB/1/ – marcias

gradiente di sfondo con tinta unita

risposta

Problemi correlati