Wie erstelle ich einen Überblendungseffekt mit CSS im Hintergrund mit einem Bild darüber?
Ich versuche, das zu replizieren Bildschieberegler auf https://www.masterclass.com/
Kommentare
- Überprüfen Sie diese Frage zu stackoverflow Können Sie einen transparenten CSS3-Farbverlauf über ein Hintergrundbild legen?
- Sie haben einen Grund, kein PNG-Overlay zu verwenden. genau wie auf dieser Website ? Der oberste Farbverlauf ist jedoch ein CSS-Farbverlauf.
- Ich stelle jetzt fest, dass ich nicht ' lese die Frage nicht so gut und du fragst ' nicht speziell nach CSS-Lösungen. Auf dieser Website haben sie das Schiebereglerbild als Hintergrundbild und darin dasselbe Element verwenden sie
:beforePseudo-Elemen t, um den PNG-Verlauf als Hintergrundbild über das eigentliche Bild anzuwenden.
Antwort
Zum Erstellen In diesem Look können Sie das Bild als Hintergrund für ein Div festlegen und dann einen Verlauf von „Schwarz zu klar zu schwarz“ im Div erstellen, sodass er über dem Bild angezeigt wird.
.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 */ } Ich habe diesen Verlaufscode von einem der vielen Verlaufsgeneratoren gefunden: http://www.colorzilla.com/gradient-editor/
mit folgenden Einstellungen: 
Antwort
Sie können Hintergründe in CSS tatsächlich durch Komma getrennt verketten. Der erste ist der niedrigste, der zweite ist darüber hinaus, et. Sie müssen also zuerst das Bild und dann den Farbverlauf einstellen.
In modernen Browsern können Sie sogar Mischmodi verwenden, um einen schönen Überblendungseffekt auf das Bild zu erzielen.
I. „Ich überlasse es Ihnen, die erforderlichen Browserpräfixe zu generieren (der in der anderen Antwort verknüpfte Generator ist dafür sehr gut geeignet).
.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 Beweis: https://jsfiddle.net/synu8xk1/2/