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

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;
}

Answer 2

body {
  margin:0;
  height:100vh;
  background: 
  radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%), 

背景图像：径向渐变（28.07927295567223% 49.68482195069459%，hsla（329.6470588235294，69.10569105691057%，75.88235294117646%，1） hsla(329.6470588235294, 69.10569105691057%, 75.88235294117646%, 0) 100%), 径向梯度( 10.769854354411358% 86.83215832681677%, hsla(209.64705882352942, 69.10569105691057%, 75.88235294117646%, 1) 0%, hsla(209.6470) 5882352942, 69.10569105691057%, 75.88235294117646%, 0) 100%), 径向梯度(at 77.07898986900108% 13.89870638734192%, hsla(329.6470588235) 294 , 69.10569105691057%, 75.88235294117646%, 1) 0%, hsla(329.6470588235294, 69.10569105691057%, 75.88235294117646%, 0) 100%),梯度(79.2864696915881% 90.1408055467074%, hsla(209.64705882352942, 69.10569105691057%, 75.88235294117646%, 1) 0%, hsla(209.64705882352942, 69.10569105691057%, 75.88235294117646%, 0) 100%), 径向梯度(at 44.01334299037725% 11.18686273299656%, SLA(329.6470588235294、69.10569105691057%、75.88235294117646%、1) 0%、HSLA(329.6470588235294、69.10569105691057% , 75.88235294117646%, 0) 100%), 径向梯度(at 5.942200185060242% 78.32488774663611%, hsla(209.64705882352942, 69.10569105691057%, 75) .88235294117646%, 1) 0%, hsla(209.64705882352942, 69.10569105691057%, 75.88235294117646%, 0) 100%) , 径向梯度(at 91.92955492951205% 27.976727311818085%, hsla(329.6470588235294, 69.10569105691057%, 75.88235294117646%, 1) 0%, 9.6470588235294, 69.10569105691057%, 75.88235294117646%, 0) 100%), 径向梯度(at 96.31253105737743% 33.670068596144766 %, hsla(209.64705882352942, 69.10569105691057%, 75.88235294117646%, 1) 0%, hsla(209.64705882352942, 69.10569105691057%, 75.882 35294117646%, 0) 100%), 径向渐变(at 23.555267388890023% 3.0616616142341124%, hsla(329.6470588235294, 69.10569105691057%, 75.88235294117646%, 1) 0%, hsla(329.6470588235294, 69.10569105691057%, 75.88235294117646%, 0) 100%);