Я пытаюсь применить круг с радиальным градиентом с размерами поверх фонового изображения в css. Всякий раз, когда я применяю градиентную линию, она ничего не делает — мои слои кажутся неупорядоченными.
/* HTML Styles */
html {
background-image: url("image1.jpg");
background-attachment: fixed;
}
/* Body Styles */
body {
background-image: url("image2.jpg");
background: radial-gradient(circle closest-corner at 40% 70%, white 15%,
rgba(151, 151, 151, 0.5) 50%);
}
Вам нужно добавить их в то же свойство фона, что и в вашем коде, который вы переопределяете первый background-image, и учитывается только градиент. Также убедитесь, что вы соблюдаете порядок, первый слой будет верхним.
body {
margin:0;
height:100vh;
background:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/") center/cover;
}Вы также можете использовать этот синтаксис (приведенный выше является сокращением):
body {
margin:0;
height: 100vh;
background-image:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/");
background-size: auto, cover;
background-position:center;
}