Question

我遇到背景问题：

我有3个子元素。
每个人都通过#nth_image ID获得了背景图片。
他们还通过.background-gradient类得到了背景渐变。
所有png图片都有alpha通道

问题是背景图像会覆盖背景渐变。

结果我想要前面的png图像和背景上的渐变

.background_gradient {
  background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
  background: url(images/img01.png);
}
#second_image {
  background: url(images/img02.png);
}
#third_image {
  background: url(images/img03.png);
}

<div class="parent">
  <div id="first_iamge" class="background_gradient"></div>
  <div id="second_image" class="background_gradient"></div>
  <div id="third_image" class="background_gradient"></div>
</div>

Answer 1

渐变和图像背景都使用与背景相同的图像属性。它好像你是这样写的：

.class {
  background-image: url('/path/to/image.png');
  background-image: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}

所以基本上你用渐变覆盖背景的图像部分，反之亦然，这取决于哪个规则优先于另一个规则。

我的建议是以不同的方式设置标记样式。在div里面有一个div，你想要的背景。

<div class="background-gradient">
  <div id="first-background"></div>
</div>

Answer 2

如果你想在一个元素上混合两种类型的背景，我的建议是使用css伪元素。您可以使用与您的渐变部分元素大小相同的before伪元素。

你可以这样：

.background_gradient {
  position: relative;
}    
.background_gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: -webkit-radial-gradient(top, ellipse cover, #f9f9f9 0%,#eaeaea 100%);
}
#first_image {
  background: url(images/img01.png);
}
#second_image {
  background: url(images/img02.png);
}
#third_image {
  position: relative;
  background: url(images/img03.png);
}

CSS背景渐变，图片

2 个答案: