使用CSS創建背景圖像透明

我有一個場景，我需要一個透明的背景圖像，但我無法控制動態生成的圖像。出於這個原因，透明PNG不存在問題。同一個div內的所有子元素都不應該被影響，並且應該完全可見。使用CSS創建背景圖像透明

我知道如何將透明度應用於背景顏色和塊級元素，但是您可以爲背景圖像執行此操作嗎？

來源

2011-04-12 Andrew

你必須使用''和應用'opacity'。這是唯一的方法。 – thirtydot 2011-04-12 13:48:02

任何解決div分層使用z-index的問題？ – Andrew 2011-04-12 13:49:06

您可以在現有背景上放置半透明的白色或黑色圖像嗎？ – Sam 2011-04-12 13:50:09

使用背景設置元素的不透明度是一個好的開始，但您會發現不透明度被更改的元素也是透明的。

解決方法是使用包含背景且透明的元素（opacity:0.6; filter:alpha(opacity=60)），然後將容器與實際內容一起浮動或放置在其上。

下面是這種方法將如何工作的例子：

#container { 
 
    width: 200px; 
 
    postiion: relative; 
 
    } 
 
    
 
    #semitrans { 
 
    width: 100%; height: 100px; 
 
    background: #f00; 
 
    opacity: 0.6; 
 
    filter:alpha(opacity=60); 
 
    } 
 
    
 
    #hello { 
 
    width: 100%; height: 100px; 
 
    position: absolute; 
 
    top: 20px; left: 20px; 
 
    }

<div id="container"> 
 
    <div id="semitrans"></div> 
 
    <p id="hello">Hello World</p> 
 
</div>

來源

2011-04-12 13:47:49 derekerdmann

IE使用filter:alpha(opacity=50);而其他人使用opacity:.5
就包括他們倆。

來源

2011-04-12 13:43:10 Sam

這不適用於這種背景圖像 – Andrew 2011-04-12 13:48:07

這將淡化一個元素中的所有元素，而不僅僅是背景圖像。我建議在不透明度上使用rgba，因爲您可以單獨設置單個元素的透明度。但即使是這樣，只是背景圖片無法工作 – Alex 2011-04-12 13:50:13

不，技術上不。您必須應用背景顏色才能使其發揮作用，因爲您會淡化顏色和圖像，而不僅僅是圖像。請記住，背景圖片不是風格化的內容。

你可能通過使用圖像而不是背景圖像來破解它，並且在頂部有一些相對和絕對定位以及一些z-indexing的混合。但這是我能想到的唯一方法！

來源

2011-04-12 13:45:39 Alex

圖像總是不會放在圖像下方？ – Andrew 2011-04-12 13:46:56

您的黑客評論是我的備份計劃只是希望我錯過了一些東西...... – Andrew 2011-04-12 13:47:45

使用CSS創建背景圖像透明

回答

相關問題