Градиент поверх картинки

Question

Градиент поверх картинки

Рейтинг: 0Ответов: 2Опубликовано: 06.02.2023

Почему градиент поверх картинки не появляется?

HTML код:

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#230051">
    <title>EmilAhmaServer – Главная</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="shortcut icon" href="/image/icon.png" type="image/png">
  </head>
  <body>
    <div id="header" align="center">
      <img src="image/banner.png" width="100%">
    </div>
  </body>
</html>

CSS код:

* {
  padding: 0;
  margin: 0;
}

#header {
  width: 100%;
  position: relative;
}

#header:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%);
}

css html img style

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Для :before необходимо задать свойство content со значением ''.

content: '';

Это необходимо, т.к псевдоэлементы :before и :after работают в связке со свойством content. Если его не указать, то псевдоэлемент в DOM не появится.

Answer 2

▲ 0

Так надо было сделать да? @ΝNL993

* {
  padding: 0;
  margin: 0;
}

#header {
  width: 100%;
  position: relative;
}

#header:before {
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.tipo-kartinka {
  display: block;
  width: 100%;
  height: 400px;
  background: red;
}

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#230051">
    <title>EmilAhmaServer – Главная</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="shortcut icon" href="/image/icon.png" type="image/png">
  </head>
  <body>
    <div id="header" align="center">
      <div class="tipo-kartinka"></div>
    </div>
  </body>
</html>

Градиент поверх картинки

Ответы