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

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

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

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

63e9e63ba7204648874125.jpeg
  • Вопрос задан
  • 703 просмотра
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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend developer (Vue.js)
Хабр • Москва
от 250 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Надо найти рабочую связку ustd/uzs и рассказать как ее проворачивать
16 февр. 2025, в 17:15
1000 руб./за проект
Docker на развертывание Django + React
16 февр. 2025, в 15:54
2500 руб./за проект
Написание нейросети на Python или C++ для анализа ЭКГ сигналов
16 февр. 2025, в 11:06
15000 руб./за проект
Ещё заказы