Cum se creează un efect de estompare cu CSS pe fundal, cu o imagine deasupra?

Pentru a crea cu acest aspect, puteți seta imaginea ca fundal al unui div și apoi puteți crea un gradient „negru pentru a șterge până la negru” în div, astfel încât să apară deasupra imaginii.

.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 */ } 

Am găsit acest cod de gradient de la unul dintre numeroasele generatoare de gradient: http://www.colorzilla.com/gradient-editor/

cu aceste setări:

Puteți efectiv să lanțați fundaluri în CSS, separate printr-o virgulă. Primul este cel mai mic, al doilea este deasupra, et. Deci, tot ce trebuie să faceți este să setați mai întâi imaginea și apoi gradientul.

Puteți folosi chiar moduri de amestecare în browserele moderne pentru a asigura un efect de amestecare frumos asupra imaginii.

I „Voi lăsa la latitudinea dvs. să generați prefixele browserului necesare (generatorul conectat în celălalt răspuns este foarte bun pentru asta).

.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 dovadă: https://jsfiddle.net/synu8xk1/2/