Градиент на изображении

@Smilelan · Регистрация: 25.12.2017

Author24 — интернет-сервис помощи студентам

Как сделать чтобы градиент занимал только часть картинки, а не растягивался на всю?

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Кузовной ремонт</title>
    <header>
        <div class='header'>
            <div class="logo">
            </div>
        </div>
    </header>
</head>
<body>
    
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
body, head{
    font-family: 'Lato', sans-serif;
 
 
}
header{
    height:100vh;
    background-image: linear-gradient(to bottom, rgba(46, 43, 43, 0.81),rgba(255,255,255,1)),url(img/background-header.png);
}

@mrtoxas · 29.11.2019, 15:23

CSS

linear-gradient(
      to bottom,
      rgba(46, 43, 43, 0.81) 0%,
      rgba(255, 255, 255, 1) 49%,
      rgba(255, 255, 255, 0) 50%    
    )

@Smilelan · 29.11.2019, 15:47 **[ТС]**

mrtoxas, то есть в таких случая просто нужно добавлять еще один цвет градиента?

Добавлено через 3 минуты
mrtoxas, опять же, фоновую картинку не видно, хотелось бы по плавнее https://ibb.co/s5yzVQH

@Smilelan 0 / 0 / 0 Регистрация: 25.12.2017 Сообщений: 27
	29.11.2019, 15:47 [ТС]	3
	mrtoxas, то есть в таких случая просто нужно добавлять еще один цвет градиента? Добавлено через 3 минуты mrtoxas, опять же, фоновую картинку не видно, хотелось бы по плавнее https://ibb.co/s5yzVQH 0