Задать вопрос
@Doktorjd
html

Как сделать нижний край background-image прозрачным?

Есть 2 блока : верхний и осовной (родитель верхнего).
У вернего одно background-image, у основного другое (на скрине 1 и 2 соответственно).
Как сделать так, чтобы нижняя часть верхнего изображения становилась постепенно прозрачной и проявлялось изображения основного блока?
На скрине то, как должно быть (это из фигмы).

p.s. делать постепенно прозрачным верхний блок нельзя, потому что там будут блоки текста, которые не должны иметь прозрачности.

63e9e63ba7204648874125.jpeg
  • Вопрос задан
  • 687 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="background">
        <div></div>
    </div>
</body>
<style>
    .background div{
        background:linear-gradient(to bottom, rgba(0,0,0,.0), rgba(255, 0, 0, 0.716));
        width: 100%;
        height: 100%;
    }
    .background{
        width: 300px;
        height: 500px;
        background:url(Рандом картинка);
background-size: cover;
}
</style>
</html>
Ответ написан
Комментировать
Комментировать
dima9595
@dima9595
Junior PHP
На мой взгляд лучше наложить слой градиента поверх изображения и низ его сделать прозрачным.
Ответ написан
Комментировать
Комментировать
@luxurypluxury
Делаешь тень через ::after на блок с позишн абсолют, чтобы блоки не были затемнены, на них z-index
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
HTML-верстальщик
ТехСофт
от 60 000 до 60 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обход базы контактов и приглашение их на новую платформу
02 февр. 2025, в 04:45
200 руб./в час
Перенести слитый сайт в tg-mini app
02 февр. 2025, в 00:55
2500 руб./за проект
Оптимизировать работу сайта
02 февр. 2025, в 00:25
5000 руб./за проект
Ещё заказы