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

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

查看：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;
}

如您在给出的示例中所看到的，有两个图像 - 一个中心底部，另一个左上角。对于不透明度，如果我想分层背景，我会在图像编辑器中执行此操作。

Answer 3

无法更改background-image的opacity。

您可以做的是添加一个额外的元素，并在盒子顶部添加不透明度和背景。

CSS-tricks上的该片段显示了一种优雅的使用伪元素来执行此操作的方法，因此您无需混乱标记即可实现效果：透明的背景图像

希望它有帮助。