css - sfumati - html5 background gradient




Come faccio a combinare un background-image e un gradiente CSS3 sullo stesso elemento? (11)

Come metodo sicuro, puoi semplicemente creare un'immagine di sfondo che vale 500x5 pixel, nel tuo uso di css :

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

Dove xxxxxx corrisponde al colore che corrisponde al colore del gradiente finale.

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

Come utilizzare i gradienti CSS3 per il mio background-color e quindi applicare un'immagine di background-image per applicare una sorta di texture leggera trasparente?


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 in questo modo:

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

Spero che voi ragazzi lo troviate utile.

credito a @Gidgidonihah per trovare la soluzione iniziale.


Io 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>

  1. Se posizioni il gradiente prima dell'URL dell'immagine, questa immagine verrà visualizzata sotto il gradiente.

.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 è la stessa come abbiamo più immagini di sfondo come descritto here


Per il mio design reattivo, la mia freccia in basso a discesa sul lato destro della scatola (fisarmonica verticale), percentuale accettata come posizione. Inizialmente la freccia verso il basso era "position: absolute; right: 13px;". Con il posizionamento del 97% ha funzionato come un fascino come segue:

> 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 Scusa, non so come gestire i filtri.


Se devi ottenere gradienti e immagini di sfondo che lavorano 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'attributo filter e che esistono due istanze di progid:[val] separate da una virgola prima di chiudere il valore dell'attributo con un punto e virgola. Ecco il fiddle . Notate anche che quando guardate il violino il gradiente si estende oltre gli angoli arrotondati. Non ho una correzione per quell'altro che non usa 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 source ).

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


Se hai strani errori con il download di immagini di sfondo usa il controllo W3C Link: https://validator.w3.org/checklink

Ecco i mixin moderni che uso (credits: http://codepen.io/thebabydino/full/pjxVWp/ ):

.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}[email protected]{version}"); // fallback
    background: url("@{img-folder}/@{imageName}[email protected]{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}[email protected]{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);
}

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 mixin LESS (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
    }
}

Sfondi multipli!

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

Queste 2 linee sono il fallback per qualsiasi browser che non faccia gradienti. Vedi le note per impilare le immagini solo IE <9 sotto.

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

La linea finale imposta un'immagine di sfondo e un gradiente per i browser che possono gestirli.

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

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

Stack di livelli

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

Per ulteriori informazioni sulla stratificazione dello sfondo, vedere http://www.w3.org/TR/css3-background/#layering .

Solo immagini impilabili (nessuna sfumatura nella dichiarazione) Per IE <9

IE9 e versioni successive possono impilare le immagini allo stesso modo. Si potrebbe usare questo per creare un'immagine gradiente per ie9, anche se personalmente, non lo farei. Comunque da notare quando si usano solo le immagini, cioè <9 ignorerà l'affermazione di fallback e non mostrerà alcuna immagine. Questo non succede quando è incluso un gradiente. Per utilizzare una singola immagine di fallback in questo caso, ti suggerisco di utilizzare il meraviglioso elemento Conditional HTML di Paul Irish insieme al tuo codice fallback:

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

Posizione di sfondo, dimensionamento ecc.

Altre proprietà applicabili a una singola immagine possono anche essere separate da virgole. Se viene fornito solo 1 valore, questo verrà applicato a tutte le immagini impilate incluso il gradiente. background-size: 40px; vincolerà sia l'immagine che il gradiente a 40px in altezza e in larghezza. Comunque usando la background-size: 40px, cover; renderà l'immagine 40px e il gradiente coprirà l'elemento. Per applicare solo un'impostazione a un'immagine, impostare l'impostazione predefinita per l'altra: background-position: 50%, 0 0; o per i browser che lo supportano usa initial : background-position: 50%, initial;

Si può anche usare la stenografia dello 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 dello sfondo, la ripetizione dello sfondo, ecc.


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

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

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


Volevo fare il pulsante span con l'immagine di sfondo, combinazione di sfumature di sfondo.

http://enjoycss.com/ contribuito a svolgere il mio compito di lavoro. Devo solo rimuovere alcuni CSS aggiuntivi generati automaticamente. Ma è davvero un bel sito costruire il tuo lavoro gratta e vinci.

#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;
}

potresti semplicemente digitare:

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







gradient