多个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

没有办法改变background-image的opacity。

你可以做的是添加一个额外的元素与所需的不透明度和背景在你的盒子上。

上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; 
} 

正如您在给出的例子中看到的那样，有两个图像 - 一个中心底部和另一个左上角。对于不透明度，我会在图像编辑器中做到这一点，如果我想分层背景。