多個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; 
} 

正如您在給出的例子中看到的那樣，有兩個圖像 - 一箇中心底部和另一個左上角。對於不透明度，我會在圖像編輯器中做到這一點，如果我想分層背景。