Kuinka luoda haalistuva vaikutus CSS: llä taustalla, jonka päällä on kuva?

Luo tällä ulkonäöllä voit asettaa kuvan div: n taustaksi ja luoda sitten ”mustasta kirkkaaksi mustaksi” -gradientin div: iin siten, että se näkyy kuvan päällä.

.slideBanner{ background-image: url("../images/Ramsey.jpg"); } .slideBanner{ background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(255,255,255,0) 48%, rgba(2,2,2,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(255,255,255,0) 48%,rgba(2,2,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000", endColorstr="#020202",GradientType=1 ); /* IE6-9 */ } 

Löysin tämän kaltevuuskoodin yhdestä monista kaltevuusgeneraattoreista: http://www.colorzilla.com/gradient-editor/

seuraavilla asetuksilla:

Voit itse ketjuttaa taustat CSS: ssä pilkuilla erotettuna. Ensimmäinen on alin, toinen on sen päällä, et. Joten sinun tarvitsee vain asettaa ensin kuva ja sitten liukuvärjäys.

Voit jopa käyttää sekoitustiloja nykyaikaisissa selaimissa varmistaaksesi kuvan mukavan sekoittamisen.

I ”Jätän itsellesi tarvittavien selainetuliitteiden luomisen (toiseen vastaukseen linkitetty generaattori on siihen erittäin hyvä).

.slideBanner{ background: url("https://placeimg.com/500/500/nature") 0 0 no-repeat, radial-gradient(ellipse at center, rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%); background-blend-mode: multiply; } 

JSfiddle todiste: https://jsfiddle.net/synu8xk1/2/