Чтобы сделать градиент поверх картинки в CSS, можно использовать свойство background-image, которое поддерживает несколько значений в виде слоев. С помощью этого свойства можно накладывать слои цвета или фона поверх изображения.
Вот пример:
HTML:
<div class="image-with-gradient">
<img src="path-to-image.jpg" alt="alt-text">
<div class="gradient-overlay"></div>
</div>CSS:
.image-with-gradient {
position: relative;
height: 400px;
width: 100%;
}
.image-with-gradient img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
.gradient-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}Этот код создаст блок с изображением в теге <img> и градиентным оверлеем в виде прозрачных чёрных слоёв поверх изображения. С помощью свойства position: relative; помечаем родительский блок, чтобы использовать его в качестве точки отсчёта для абсолютно позиционированных элементов. Затем, задаём размеры родительского блока и изображения внутри него.
Для создания градиента используем свойство background-image с линейным градиентом. В значении градиента указываются два цвета в формате RGBA (красный, зелёный, голубой и альфа-канал). Первый цвет определяет начало градиента, а второй — конец. В нашем примере используется градиент, начинающийся с полностью непрозрачного чёрного цвета (rgba(0, 0, 0, 0.6)) и заканчивающийся более прозрачным чёрным цветом (rgba(0, 0, 0, 0.3)). Эти цвета поочередно налагаются на изображение, создавая эффект полупрозрачности.
Когда вы обновите страницу, вы должны увидеть изображение с градиентом поверх него. Вы можете изменить цвета и прозрачность градиента, чтобы он соответствовал вашим нуждам и дизайну.
