背景图像上的径向渐变圆叠加

Question

我正在尝试在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%);
}

Answer 1

您需要将它们附加到与代码相同的背景属性中，您将覆盖第一个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;
}