Hur skapar jag en blekningseffekt med CSS på bakgrunden med en bild ovanpå?

Att skapa det utseendet kan du ställa in bilden som bakgrund av en div och sedan skapa en ”svart för att rensa till svart” gradient i div så att den visas ovanpå bilden.

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

Jag hittade den här lutningskoden från en av de många lutningsgeneratorerna: http://www.colorzilla.com/gradient-editor/

med dessa inställningar:

Du kan faktiskt kedja bakgrunder i CSS, åtskilda av ett komma. Den första är den lägsta, den andra är ovanpå, et. Så allt du behöver göra är att ställa in bilden först och sedan lutningen.

Du kan till och med använda blandningslägen i moderna webbläsare för att säkerställa en fin blandningseffekt på bilden.

I ”Låt det vara upp till dig att generera de nödvändiga webbläsarprefixen (generatorn länkad i det andra svaret är mycket bra för det).

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