背景图像上的径向渐变圆叠加
Radial-Gradient Circle Overlay on Background Image
我正在尝试在 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
的代码相同的背景中 属性,并且只考虑渐变。还要确保您遵守顺序,第一个 将是 top 层。
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;
}
你也可以使用这个语法(上面那个是shorthand):
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;
}
我正在尝试在 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
的代码相同的背景中 属性,并且只考虑渐变。还要确保您遵守顺序,第一个 将是 top 层。
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;
}
你也可以使用这个语法(上面那个是shorthand):
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;
}