Как сделать полупрозрачный градиент поверх картинки?

Question

[TitNIk]

Всем привет. Есть изображение фоновое, вставленное не через css. Хочу сделать прозрачный градиент снизу изображения (как с маской в ФШ), гуглил, видел много вариантов, фильтры (css, svg), маски, градиенты и тд, но что-то так и не вышло. Может подскажет кто что-нибудь дельное? )

Answer 1

[Philipp]

https://codepen.io/alexcarpenter/pen/LveDx

Answer 2

[Stalker_RED]

Так? jsfiddle.net/4uvgu3sh/2
Что именно у вас не выходит?

Comments

[TitNIk]

Мне нужно сделать низ полностью прозрачным. Вроде можно как-то SVG маску наложить, но в гугле толковой инфы по данной теме не много (

[Stalker_RED]

TitNIk: Специально сдвинул чуть в сторону и прописал 70 и 80%% для более резкой границы. Настраивайте по вкусу.
jsfiddle.net/4uvgu3sh/3

Answer 3

[TitNIk]

Да, но изображения я вставляю не через бг.

<div class="header-bg-img">
	<img src="images/img.jpg" alt="">
</div>

Я задаю линейный градиент для header-bg-img, а для изображения задаю прозрачность, вроде кое-как работает, но снизу граница между изображением и фоном все равно видна. Может, можно как-нибудь градиент чуть выше подвинуть? ))

Comments

[Anton fon Faust]

Градиент вы можете двигать с помощью css, прописав в linear-gradient в нужном месте прозрачный цвет.
А чтобы не было границы между фоном и изображением, margin/padding должны быть по нулям.