Как затемнить нижнюю часть изображения?

Question

!DOCTYPE html>

<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>Lemon</title>
    <script src="https://kit.fontawesome.com/caaa6ed519.js" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="lemon.css">
</head>
<body>//

//////////

Answer 1

Ты можешь использовать псевдо элемент "div::after" и задать градиент

div {
  height: 500px;
  width: 500px;
  background: url(img);
}
div::after {
  content: '';
  display: block;
  height: 500px;
  width: 500px;
  background: linear-gradient(transparent, black);
}

Answer 2

попробуй сделать див с этим параметром поверх изображения

.blacker_blur {
    margin-top: 60px;
    background: linear-gradient(to top, black -15%, transparent 90%);
    opacity: 0.8;
    width: 100%;
    height: 60px;
    position: relative;

<div class="blacker_blur"></div>

БЛОГ НА HUSL

Как затемнить нижнюю часть изображения?

Ответы (2 шт):