Efekt przenikania backgroundu w CSS

Question

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ć.

Answer 1

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

Comments

Faktycznie, a mógłbym uzyskać owy efekt nakładając go na background-image, zamiast <img>?

---

Na pseudoelementach pewnie uzyskasz podobny efekt dla background-image.

---

https://codepen.io/anon/pen/PXpMMv