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

Answer 2

不，这是不可能的。会发生什么：

您的div {}规则的优先级低于内联css，因此您的内联css background-image将覆盖以前的规则，而不是附加到其中。

解决方案：

使用子元素或:before / :after来应用layer1.png

＆＃13;

.wrapper {
  height: 200px;
  width: 300px;
  background-image: radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
  position: relative;
}

.wrapper div {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
}

body {
  background-color: black;
}

＆＃13;

<div class="wrapper"><div style="background-image: radial-gradient(rgba(0, 255, 0, 0.85) 10%, rgba(0, 245, 0, 0.19) 75%, rgba(0, 245, 0, 0) 90%);"></div></div>

＆＃13;

CSS背景图像层由CSS添加

2 个答案: