альфа канал на изображение в css

Question

День добрый, новичок в программировании и сейчас пытаюсь писать лендинг на html, однако встала проблема. Как затемнить изображение, которое поставлено на фон в header?

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='UTF-8'>
        <link rel="stylesheet" href="D:\Notepad++\first site\style.css">
        <link rel="icon" type="image/x-icon" href="D:\Notepad++\first 
        site\favicon.ico?v=2">
        <title> Знакомства </title>
    </head>
    <body>
        <header class="header">
            <div class="overlay">
                <h1 class="header-title">Хотите познакомиться с интересными 
    людьми?</h1>
            </div>
        </header>
    </body>
    </html>

   body {
       margin:auto;
       background-color: rgba(175, 238, 238);
    }   
    .header {
        height: 100vh;
        width: 100vw;
        background: url(https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace- 
   1245776_960_720.jpg) center top no-repeat;
        background-color: rgba(0, 0, 0, .3);
    }
    .overlay {
        width: 50%;
        height: 50%;
        display: flex;
    }
    .header-title {
        font-size: 140px;
        text-transform: uppercase;
        font-weight: 500;
        margin: auto;
    }

БЛОГ НА HUSL

альфа канал на изображение в css

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