CSS：半透明背景和圖像

body { 
    background-image: url('cloud.png'); 
    background-color: rgba(255, 255, 255, 0.6); 
}

我試過用上面的方法在背景圖像上面生成一個半透明的白色背景。它不起作用，只顯示背景圖像並且背景色似乎被忽略。我如何調整身體背景圖片的不透明度？CSS：半透明背景和圖像

來源

2013-11-04 Juicy

我相信'background-image'總是優先。要麼讓你的圖像變成半透明的，要麼用半透明的顏色在其上面放置另一個圖層。 – JofryHS

background-color被放置在background-image之下，而不是上面。要在圖像上方放置半透明白色塊，您需要在background-color之上放置另一個元素。

來源

2013-11-04 23:13:47

您可以使用css「before」僞類創建白色疊加層，並放置在DOM中的所有內容之前。添加的z-index：-1，以確保它不會坐其他元素之上：

body { 
    background:url("image.jpg"); 
} 
body:before { 
    content:""; 
    display:block; 
    position:fixed; 
    width:100%; 
    height:100%; 
    left:0; 
    top:0; 
    z-index:-1; 
    background-color: rgba(255, 255, 255, 0.6); 
}

jsfiddle

來源

2013-11-05 00:36:45 Sammy

有效的CSS2。 CSS3語法使用[':: before']（http://devdocs.io/css/::before）。 –

我該使用兩個獨立的圖像，宣佈一家專門出售時完成。一個是背景中的永久圖像，另一個是半透明背景的臨時銷售圖像，漂浮在另一個圖像上，在銷售結束後可以很容易地將其刪除。保持背景圖像的主div需要位於相對位置，以便您可以將位置爲絕對的半透明圖像放置在其他圖像上。

下面是HTML：

<div class="tempsale" > 
    <img src="images/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner"> 
    <div class="tempsaletext"> 
     <img src="images/URL FOR YOUR TEMPORARY SALE GOES HERE.jpg" width="500px" height="80px" alt="Sale"> 
    </div> 
</div>

這裏是CSS：

.tempsale { 
    text-align:center; 
    position:relative; 
} 
.tempsaletext { 
    positon:absolute; 
    top:10px; 
    left:20%; 
}

欲瞭解更多信息，請參閱完整說明here。

來源

2014-12-22 17:57:51 user9159

CSS：半透明背景和圖像

回答

相關問題