Hoe creëer je een fade-effect met CSS op de achtergrond met een afbeelding erop?

Maken die look kun je de afbeelding instellen als de achtergrond van een div en vervolgens een verloop van “zwart naar zwart naar zwart” maken in de div, zodat deze bovenaan de afbeelding verschijnt.

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

Ik vond deze verloopcode van een van de vele verloopgeneratoren: http://www.colorzilla.com/gradient-editor/

met deze instellingen:

Je kunt achtergronden in CSS eigenlijk aan elkaar koppelen, gescheiden door een komma. De eerste is de laagste, de tweede is daar bovenop, et. Het enige wat u dus hoeft te doen, is eerst de afbeelding instellen en vervolgens het verloop.

U kunt zelfs overvloeimodi in moderne browsers gebruiken om een mooi overvloei-effect op de afbeelding te krijgen.

I “Ik laat het aan jou over om de vereiste browservoorvoegsels te genereren (de generator die in het andere antwoord is gelinkt is daar een hele goede voor).

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