如何在css3中的浮動元素上放置背景並更改其不透明度？

Question

在CSS中，我在樣式文件夾中有一些圖像，所以忽略其他不顯示的圖像。浮動元素leftpara和joinbutton（儘管它不是按鈕的一個段落）具有背景白色，我想給它一個.4的不透明度。

#stuff:before{ 
    display: block; content:""; position: absolute; z-index:-1; 
    background: url(blah.jpg); 
    opacity:.3; 
    top:10%; left: 0; right: 0; 
    height: 50%; 
} 

fiddle

Answer 1

你可以試試這個代碼：

與hsla(0,0%,100%,0.70)或RGBA你用一個白色的背景與任何比例的飽和或不透明度來得到你想要的外觀。 您可以使用filter: alpha(opacity=50);得到不透明

background-attachment: fixed; 
background-image: url(blah.jpg); 
display: block; 
position: absolute; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
z-index: 1; 
background-color: hsla(0,0%,100%,0.70); 
background-blend-mode: overlay; 
background-repeat: no-repeat; 
filter: alpha(opacity=50); 

Answer 2

你的問題是微渺，但下面的代碼適用「浮動元素背景CSS3中，並改變其不透明度？

div{ 
 
    float: right; 
 
    display:block; 
 
    width: 350px; 
 
    height: 150px; 
 
    background-image: url(http://placehold.it/350x150/ff0000/ffffff); 
 
    opacity: 0.5; 
 
}

<div></div>