Question

这甚至可能吗？我有一个盒子，想要在另一个上添加一个背景图像。但我想添加不透明度0.5 对于顶部图像。

Answer 1

您可以使用伪元素：

#example1 {
  position: relative;
  width: 500px;
  height: 250px;
  background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}

#example1:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  opacity: .7;
  z-index: 10;
  width: 100px;
  height: 100px;
  background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
 }

http://jsfiddle.net/Let8U/

Answer 2

无法更改background-image的{{1}}。

您可以做的是在包装盒顶部添加一个具有所需不透明度和背景的额外元素。

CSS-Tricks上的这个代码段显示了使用伪元素执行此操作的优雅方式，因此您无需将标记混乱以实现效果：Transparent Background Images

希望它有所帮助。

Answer 3

退房：http://www.css3.info/preview/multiple-backgrounds/这会有所帮助。

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

正如您在给出的示例中所看到的，有两个图像 - 一个是中心底部，另一个是左上角。对于Opacity，如果我想分层背景，我会在图像编辑器中这样做。

多个CSS 3背景图像 - 为顶部图像添加不透明度

3 个答案: