Проблема с наложение градиента на картинку (Background)

Question

На заднем фоне картинка и поверх должен быть наложен градиент. Но градиент перекрывает картинку, если делать через RGBA, то цвет становится грязным за счет добавления асфальта. RGBA со значением 0.9 работает, но даже так существенно отличается цвет. Прошу помочь решить проблему. Вот код.

/*html*/

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <div class="header">Lorem ipsum, dolor sit amet consectetur</div>
</body>
</html>

/*css*/

.header {
   margin: 0 auto;
   width: 800px;
   height: 200px;
   background-image: linear-gradient(-53deg, #00b8d4 0%, #1de9b6 100%), url('https://svetvmir.ru/wp-content/uploads/2012/11/8d5d1a1fb6eeb2615019bb1a3c4.jpg');
}

Answer 1

Это то, что вам нужно?

Разумеется, можно вместо opasity непрозрачность градиента задать при помощи процентов в самом градиенте. Я использовал псевдокласс after, чтобы разнести картинку и градиент по разным слоям.

.header {
  position: relative;
   margin: 0 auto;
   width: 800px;
   height: 200px;
   background-image: url('https://svetvmir.ru/wp-content/uploads/2012/11/8d5d1a1fb6eeb2615019bb1a3c4.jpg');
}
.header:after {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  content:" ";
  background-image: linear-gradient(-53deg, #00b8d4 0%, #1de9b6 100%);
  opacity: .5;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <div class="header">Lorem ipsum, dolor sit amet consectetur</div>
</body>
</html>

Второй вариант:

.header {
  position: relative;
   margin: 0 auto;
   width: 800px;
   height: 200px;
   background-image: url('https://svetvmir.ru/wp-content/uploads/2012/11/8d5d1a1fb6eeb2615019bb1a3c4.jpg');
}
.grad {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(-53deg, #00b8d4 0%, #1de9b6 100%);
  opacity: .5;
}
.header p {
  position: relative;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <div class="header">
      <div class="grad"></div>
      <p>Lorem ipsum, dolor sit amet consectetur</p>
    </div>
</body>
</html>

БЛОГ НА HUSL

Проблема с наложение градиента на картинку (Background)

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