Как наложить градиент поверх фонового изображения?

Question

Всем привет. Никак не получается совместить градиент с фоновым изображением, чтобы получилось как хедер в макете: Макет

Пробовал делать отдельный див, куда прописывал только градиент, все равно не выходит. Пытался через псевдо-элемент как-то сделать, не получается. По итогу оставил вариант, где сначала идет градиент, за ним через запятую ссылка на изображение, но в результате остается виден только градиент.

Буду очень благодарен за помощь.

    <!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <title>Example</title>
</head>
<body>
    <header>
        <div class="header">
            <nav>
                <a href="index.html"><img src="img/logo.svg" alt="logo"></a>
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Explore</a></li>
                    <li><button type="button" class="nav-btn">Get started</button></li>
                </ul>
            </nav>
            <div class="header-title">
                <h1>Your strategy is only as good as<br>you execute it<span class="dot">.</span></h1>
                <button type="button" class="nav-btn">Get started</button>
            </div> 
        </div> 
    </header>
</body>
</html>

CSS

 * {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

body {
    background-color: #EDEDED;
    font-family: 'Roboto', sans-serif;
}

.header {
    width: 1920px;
    height: 700px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.47% 100% at 85.83% 100%, #FDAB01 0%, rgba(253, 171, 1, 0) 100%), linear-gradient(0deg, #C8C8C8, #C8C8C8), url("../img/header_logo.jpg");
}

Answer 1

Там проще не использовать картинку как фон.

.header {
  display: block;
  width: 100%;
  background-color: #fff;
  position: relative;
}

.header::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 36.46%;
}

.header__bg {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(0deg, rgba(255,255,255,.2), rgba(255,255,255,.2)),
    radial-gradient(50% 50% at 50% 50%, rgba(219,219,219,.8), rgba(219,219,219,0)),
    radial-gradient(77.47% 100% at 85.83% 100%, #FDAB01, rgba(253,171,1,0)),
    radial-gradient(89.64% 57.39% at 10.36% 0%, #DCE8EE, rgba(220,232,238,0)),
    linear-gradient(0deg, #C8C8C8, #C8C8C8);
  position: absolute;
  left: 0;
  top: 0;
}

.header__bg img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  mask: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1));
  mix-blend-mode: darken;
}

<header class="header">
  <div class="header__bg">
    <img src="//i.imgur.com/JNDxyMs.png" alt="">
  </div>
</header>

А вообще, я бы использовал всё картинкой, там несколько img с использованием mix-blend-mode, и маски.. Нет смысла так извращаться ради картинки, которая вряд ли будет меняться часто.

header {
  background: #fff url('//i.imgur.com/eDHVgai.png') no-repeat center center / cover;
}

header::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 36.46%;
}

<header></header>

P.s.

Ваша основная ошибка заключалась в том, что поверх слоя с изображением лежал непрозрачный градиент..

..., linear-gradient(0deg, #C8C8C8, #C8C8C8), url("../img/header_logo.jpg")

БЛОГ НА HUSL

Как наложить градиент поверх фонового изображения?

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