• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Efekt przenikania backgroundu w CSS

0 głosów
1,337 wizyt
pytanie zadane 22 grudnia 2018 w HTML i CSS przez Anoonymous Obywatel (1,560 p.)

Witam, potrzebuje uzyskać efekt jak na załączonym zdjęciu: EFEKT

Chodzi tu dokładnie o szarą "mgłę" na zdjęciu oraz stopniowe przeniknięcie obrazka w tło u dołu.

Taki efekt daje np. 

    background: linear-gradient(to top, black 0%, white 100%)

Ale bez zdjęcia...  Chciałbym móc podmieniać obrazki - background-image, tak aby efekt pozostał z innym tłem, jednak nie bardzo wiem jak się za to zabrać.

1 odpowiedź

+2 głosów
odpowiedź 22 grudnia 2018 przez Grzegorz :> Dyskutant (8,050 p.)
wybrane 5 stycznia 2019 przez Anoonymous
 
Najlepsza
Wystarczy zadeklarować kolor z przezroczystością, np. zamiast 'black', to 'rgba(0,0,0,.6)' i tak samo z białym.
Codepen:
https://codepen.io/anon/pen/OrpGWB

Mam nadzieję, że pomogłem :D
komentarz 22 grudnia 2018 przez Anoonymous Obywatel (1,560 p.)
Faktycznie, a mógłbym uzyskać owy efekt nakładając go na background-image, zamiast <img>?
komentarz 22 grudnia 2018 przez arces Pasjonat (17,700 p.)
Na pseudoelementach pewnie uzyskasz podobny efekt dla background-image.
komentarz 22 grudnia 2018 przez Grzegorz :> Dyskutant (8,050 p.)

Podobne pytania

0 głosów
3 odpowiedzi 253 wizyt
pytanie zadane 24 marca 2020 w HTML i CSS przez Stairs Nowicjusz (200 p.)
0 głosów
2 odpowiedzi 479 wizyt
pytanie zadane 26 sierpnia 2022 w HTML i CSS przez EdeX Mądrala (5,130 p.)
0 głosów
2 odpowiedzi 1,163 wizyt
pytanie zadane 21 marca 2021 w HTML i CSS przez janzw4 Bywalec (2,050 p.)

93,427 zapytań

142,421 odpowiedzi

322,649 komentarzy

62,787 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...