html - CSS 背景渐变，图像

Question

我的背景有问题:

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

---

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

• 结果我想要前面的 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>