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的代码相同的背景属性中，并且仅考虑渐变。另外请确保您尊重订单，第一个将是顶部图层。

＆＃13;

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

＆＃13;

您也可以使用此语法（上面的简写）：

＆＃13;

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

＆＃13;

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

1 个答案: