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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция Битрикс в наше FastAPI приложение
01 мая 2024, в 02:11
5000 руб./за проект
Правки в макет Figma
01 мая 2024, в 00:29
2000 руб./за проект
Верстка сайта
01 мая 2024, в 00:20
15000 руб./за проект
Ещё заказы