Come posso combinare un'immagine di sfondo e un gradiente CSS3 sullo stesso elemento?

Come posso usare i gradienti CSS3 per i miei background-colore quindi applicare a background-imageper applicare una sorta di texture leggera e trasparente?

Sfondi multipli!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Queste 2 righe sono il fallback per qualsiasi browser che non fa pendenze. Vedi le note per impilare solo immagini IE <9 di seguito.

• La linea 1 imposta un colore di sfondo piatto.
• La riga 2 imposta il fallback dell'immagine di sfondo.

L'ultima riga imposta un'immagine di sfondo e una sfumatura per i browser in grado di gestirle.

• La linea 3 è per tutti i browser relativamente moderni.

Quasi tutti i browser attuali supportano più immagini di sfondo e sfondi CSS. Consulta http://caniuse.com/#feat=css-gradients per il supporto del browser. Per un buon post sul perché non sono necessari più prefissi del browser, vedere http://codepen.io/thebabydino/full/pjxVWp/

Stack di livelli

Va notato che la prima immagine definita sarà in cima alla pila. In questo caso, l'immagine è in cima al gradiente.

Per ulteriori informazioni sulla stratificazione in background, consultare http://www.w3.org/TR/css3-background/#layering .

Impilare SOLO immagini (senza sfumature nella dichiarazione) Per IE <9

IE9 e versioni successive possono impilare le immagini allo stesso modo. Potresti usarlo per creare un'immagine sfumata per ie9, anche se personalmente non lo farei. Tuttavia, da notare quando si utilizzano solo immagini, ovvero <9 ignorerà la dichiarazione di fallback e non mostrerà alcuna immagine. Ciò non accade quando è incluso un gradiente. Per utilizzare una singola immagine di fallback in questo caso, ti suggerisco di utilizzare il meraviglioso elemento HTML condizionale di Paul Irish insieme al tuo codice di fallback:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Posizione di sfondo, dimensionamento ecc.

Altre proprietà che potrebbero essere applicate a una singola immagine possono anche essere separate da virgola. Se viene fornito solo 1 valore, questo verrà applicato a tutte le immagini sovrapposte incluso il gradiente. background-size: 40px;vincolerà sia l'immagine che la sfumatura a 40px di altezza e larghezza. Tuttavia, l'utilizzo background-size: 40px, cover;renderà l'immagine 40px e il gradiente coprirà l'elemento. Per applicare solo un'impostazione a un'immagine, imposta l'impostazione predefinita per l'altra: background-position: 50%, 0 0;o per i browser che la supportano usa initial:background-position: 50%, initial;

È inoltre possibile utilizzare la scorciatoia di sfondo, tuttavia ciò rimuove il colore e l'immagine di fallback.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Lo stesso vale per la posizione di sfondo, la ripetizione di sfondo, ecc.

Se vuoi anche impostare la posizione dello sfondo per la tua immagine, allora puoi usare questo:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

oppure puoi anche creare un MENO mixin (stile bootstrap):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Una cosa da capire è che la prima immagine di sfondo definita è in cima allo stack. L'ultima immagine definita sarà in basso. Ciò significa che, per avere una sfumatura di sfondo dietro un'immagine, è necessario:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

È inoltre possibile definire le posizioni e le dimensioni dello sfondo per le immagini. Ho messo insieme un post sul blog su alcune cose interessanti che puoi fare con i gradienti CSS3

potresti semplicemente digitare:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);

Uso sempre il seguente codice per farlo funzionare. Ci sono alcune note:

1. Se si posiziona l'URL dell'immagine prima del gradiente, questa immagine verrà visualizzata sopra il gradiente come previsto.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}

<div class="background-gradient"></div>

2. Se si posiziona la sfumatura prima dell'URL dell'immagine, questa immagine verrà visualizzata sotto la sfumatura.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}

<div class="background-gradient"></div>

Questa tecnica è identica a quella che abbiamo più immagini di sfondo come descritto qui

la mia soluzione:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

Avevo un'implementazione in cui dovevo portare questa tecnica un passo avanti e volevo delineare il mio lavoro. Il codice seguente fa la stessa cosa ma usa SASS, Bourbon e uno sprite di immagine.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS e Bourbon si occupano del codice cross-browser, e ora tutto ciò che devo dichiarare è la posizione di sprite per pulsante. È facile estendere questo principio per i pulsanti attivi e gli stati al passaggio del mouse.

Se si verificano strani errori con il download di immagini di sfondo, utilizzare il controllo Link W3C: https://validator.w3.org/checklink

Ecco i moderni mixin che uso (crediti: PSA: non usare i generatori di gradiente ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

Ecco un MIXIN che ho creato per gestire tutto ciò che le persone potrebbero voler usare:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Questo può essere usato così:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

Spero che lo troviate utile.

merito a @Gidgidonihah per aver trovato la soluzione iniziale.

Stavo cercando di fare la stessa cosa. Mentre il colore di sfondo e l'immagine di sfondo esistono su livelli separati all'interno di un oggetto - nel senso che possono coesistere - i gradienti CSS sembrano cooptare il livello di immagine di sfondo.

Da quello che posso dire, l'immagine di confine sembra avere un supporto più ampio rispetto a più sfondi, quindi forse è un approccio alternativo.

http://articles.sitepoint.com/article/css3-border-images

AGGIORNAMENTO: un po 'più di ricerca. Sembra che Petra Gregorova abbia qualcosa che funziona qui -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

È possibile utilizzare più sfondi: linear-gradient (); chiama, ma prova questo:

Se vuoi che le immagini siano completamente fuse insieme dove non sembra che gli elementi vengano caricati separatamente a causa di richieste HTTP separate, usa questa tecnica. Qui stiamo caricando due cose sullo stesso elemento che si caricano contemporaneamente ...

Assicurati solo di convertire prima la tua immagine / trama png trasparente pre-renderizzata a 32 bit in stringa base64 e usarla all'interno della chiamata css immagine di sfondo (al posto di INSERTIMAGEBLOBHERE in questo esempio).

Ho usato questa tecnica per fondere una trama dall'aspetto di wafer e altri dati di immagine serializzati con una regola standard rgba di trasparenza / gradiente lineare css. Funziona meglio della sovrapposizione di più disegni e dello spreco di richieste HTTP, il che è negativo per i dispositivi mobili. Tutto viene caricato sul lato client senza alcuna operazione di file richiesta, ma aumenta la dimensione del byte del documento.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

Se devi ottenere gradienti e immagini di sfondo che funzionano insieme in IE 9 (HTML 5 e HTML 4.01 Strict), aggiungi la seguente dichiarazione di attributo alla tua classe css e dovrebbe fare il trucco:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Si noti che si utilizza l' filterattributo e che ci sono due istanze progid:[val]separate da una virgola prima di chiudere il valore dell'attributo con un punto e virgola. Ecco il violino . Si noti inoltre che quando si osserva il violino il gradiente si estende oltre gli angoli arrotondati. Non ho una soluzione per l'altro che non usa gli angoli arrotondati. Si noti inoltre che quando si utilizza un percorso relativo nell'attributo src [IMAGE_URL], il percorso è relativo alla pagina del documento e non al file css (vedere sorgente ).

Questo articolo ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) è ciò che mi ha portato a questa soluzione. È piuttosto utile per CSS3 specifico per IE.

Volevo creare un pulsante di span con l'immagine di sfondo, la combinazione gradiente di sfondo.

http://enjoycss.com/ mi ha aiutato a svolgere il mio compito lavorativo. Solo io devo rimuovere alcuni CSS aggiuntivi generati automaticamente. Ma è davvero un bel sito costruire il tuo lavoro di graffio.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

Risolvo il problema in quel modo. Definisco il gradiente in HTML e l'immagine di sfondo nel corpo

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

Per il mio design reattivo, la mia freccia rivolta verso il basso sul lato destro della scatola (fisarmonica verticale), ha accettato la percentuale come posizione. Inizialmente la freccia in giù era "position: absolute; right: 13px;". Con il posizionamento del 97% ha funzionato come nel modo seguente:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS Siamo spiacenti, non so come gestire i filtri.

Come metodo sicuro, puoi semplicemente creare un'immagine di sfondo che è 500x5 pixel, nel tuo cssuso:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Dove xxxxxxcorrisponde al colore corrispondente al colore sfumato finale.

Puoi anche risolvere questo problema nella parte inferiore dello schermo e farlo corrispondere al colore iniziale del gradiente.