Jak vytvořit efekt úniku s CSS na pozadí s obrázkem nad ním?
Snažím se replikovat jezdec obrázku na https://www.masterclass.com/
Komentáře
- Podívejte se na tuto otázku na StackOverflow Dokážete překrýt průhledný přechod css3 přes obrázek na pozadí?
- Máte nějaký důvod nepoužívat překrytí png, stejně, jako to používají na tomto webu ? Horní gradient je však přechod css ..
- Teď si uvědomuji, že jsem ' T tuto otázku si dobře přečtete a vy vlastně <
výslovně nepožádáte o řešení pouze pro CSS. Na tomto webu mají obrázek jezdce jako obrázek na pozadí a v tom stejný prvek, který používají :before pseudoelemen t použít přechod png jako obrázek BG na horní část skutečného obrázku.
Odpovědět
Vytvořit v tomto vzhledu můžete nastavit obrázek jako pozadí divu a poté vytvořit v divu přechod „black to clear to black“, takže se objeví v horní části obrázku.
.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 */ } Našel jsem tento kód přechodu od jednoho z mnoha generátorů přechodů: http://www.colorzilla.com/gradient-editor/
s tímto nastavením: 
Odpovědět
Pozadí v CSS můžete skutečně zřetězit a oddělit je čárkou. První je nejnižší, druhý je navíc, atd. Vše, co musíte udělat, je nejprve nastavit obrázek a poté přechod.
V moderních prohlížečích můžete dokonce použít režimy prolnutí, abyste zajistili pěkný efekt prolnutí obrázku.
I „Nechám na vás, abyste vygenerovali požadované předpony prohlížeče (generátor propojený s druhou odpovědí je na to velmi dobrý).
.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 proof: https://jsfiddle.net/synu8xk1/2/