1

Ребят, столкнулся с проблемой оформления секции header. Судя по всему, должны использоваться изображение и градиент, но у меня получается не то, что показано на макете.

Прошу помочь с проблемой

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>Drone Zone</title>
</head>
<body>
    <header>

    </header>
</body>
</html>




    body {
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    height: 2500px;
    background: url(images/Layer4copy.png) no-repeat center center, linear-gradient(to right, rgb(203, 0, 53), rgb(224, 105, 53));
    background-size: cover;
}

myResult Photoshop

1 ответ 1

1

Чтобы реализовать использование и градиента, и фона одновременно для одного элемента, необходимо обратить внимание на, собственно, свойство background:

header {
    background: url(images/Layer4copy.png) no-repeat center center, linear-gradient(to right, rgb(203, 0, 53), rgb(224, 105, 53));  
}

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

header {
  background: 
    linear-gradient(to right, rgb(203, 0, 53), rgb(224, 105, 53)), // градиент должен покрывать изображение, поэтому его значение задаётся первым
    url(images/Layer4copy.png) no-repeat center center; 
}

Во-вторых, чтобы изображение было видно под градиентом, необходимо добавить к нему непрозрачность, то есть задавать цвет необходимо с помощью rgba().

header {
  background: 
    linear-gradient(to right, rgba(203, 0, 53, 0.5), rgba(224, 105, 53, 0.5)), // допустим, необходима 50% непрозрачность
    url(images/Layer4copy.png) no-repeat center center; 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.