Hvordan oprettes en fade-effekt med CSS på baggrund med et billede ovenpå?

At oprette det udseende kan du indstille billedet som baggrund for en div og derefter oprette en “sort til klar til sort” -forløb i div, så det vises øverst på billedet.

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

Jeg fandt denne gradientkode fra en af de mange gradientgeneratorer: http://www.colorzilla.com/gradient-editor/

med disse indstillinger:

Du kan faktisk kæde baggrunde i CSS adskilt af et komma. Den første er den laveste, den anden er oven på det, et. Så alt hvad du skal gøre er at indstille billedet først og derefter gradienten.

Du kan endda bruge blandetilstande i moderne browsere for at sikre en god blandingseffekt på billedet.

I “Lad det være op til dig at generere de krævede browserpræfikser (generatoren, der er linket i det andet svar, er meget god til 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/