html - CSS 背景图像层由 CSS 添加

Question

我有一个 DOM 元素:

<div style="background-image: url(layer1.png)">...</div>

我想使用 CSS 添加下一层:

div {
  background-image: url('layer2.png'),radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
}

因此，我需要将所有 3 层的 DIV 作为背景图像。 是否可以通过纯 HTML5 CSS3 实现？

Answer 1

内联样式完全替换了 CSS 为该元素定义的属性。

你可以做的是创建一个父元素和子元素作为层，然后在 z-index 的帮助下对其进行分层，然后使用 opacity 给它一些透明度。

HTML

<div class="layers">
  <div class="layer1" style="opacity: 0.2; background-image: url(foo.png);"> </div>
  <div class="layer2" style="opacity: 0.4;"></div>
  <div class="layer3" style="opacity: 0.2;"></div>
</div>

CSS

.layers{
  position:relative;
  width: 100px;
  height: 100px;
}

.layer1, .layer2, .layer3{
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}

.layer1{ background-color: red; z-index: 0;}
.layer2{ background-color: orange; z-index: -1;}
.layer3{ background-color: pink; z-index: -2; }

JsFiddle