Градиент на css?

Question

[Ridos_Papitos]

Здравствуйте, я новичок в html и css и пытаюсь сделать пробный сайт по своему шаблону, сделанному в figma. там можно сразу посмотреть css код объекта и я просто создавал объект, копировал css код из figma и вставлял его в css файл,. но когда дело дошло до фотографии, на которой будет линейный градиент, то что-то пошло не так. Я создал изображение и дал ему клас Is

<div>
		<img src="Images\imgIsland.jpg" class="Is">
</div>

После чего в css файле я написал следующий код

.Is {
	position: absolute;
	width: 285px;
	height: 200px;
	left: 880px;
	top: 690px;

	background: linear-gradient(359.41deg, #000000 -7.77%, rgba(0, 0, 0, 0) 61.03%), url(imgIsland.jpg);
	border-radius: 16px;
}

в итоге должна выйти вот такая картинка
(извеняюсь за плохое качевство)
но градиента нет. прошу помочь. с этим.

Comments

[Сергей Сергей]

сначала картинка, потом градиент.

[Ankhena]

Оборачиваете img в figure.
Для figure задаете класс.
Для него псевдоэлемент, ему градиент.
Располагаете псевдо выше картинки грилами или абсолютами.

Answer 1

[Вячеслав Климов]

Картинка поднимается выше фона заливки.
На div с картинкой сверху наложите div с полупрозрачным градиентом.