如何使背景DIV只使用CSS

我使用CSS attrubutes透明：如何使背景DIV只使用CSS

filter: alpha(opacity=90);  
不透明度：0.9;

使DIV透明，但是當我在這個DIV中添加另一個DIV時，它也使它透明。

我想讓外部（背景）DIV只透明。怎麼樣？

來源

2011-09-27 Adham

簡短的回答是不能。將另一個div放在透明div之外。 –

相關問題：http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text –

小提琴：http://jsfiddle.net/uenrX/1/

外DIV的不透明度屬性不能由內DIV撤消。如果你想達到透明，使用rgba或hsla：

外格：

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

內格：

background-color: #FFF; /* Background white, to override the background propery*/

編輯
因爲你將filter:alpha(opacity=90)你的問題，我假設你也想爲（舊版本的）IE提供一個工作解決方案。這應該工作（IE瀏覽器的最新版本-ms-前綴）：

/*Padded for readability, you can write the following at one line:*/ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF"); 

/*Similarly: */ 
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    startColorStr="#E6FFFFFF", 
    endColorStr="#E6FFFFFF");

我已經使用了漸變濾鏡，開始用相同的start-和end-color，使背景不顯示梯度，但平坦的顏色。顏色格式爲ARGB十六進制格式。我寫了一個JavaScript片段，以相對不透明度值轉換爲絕對字母的十六進制值：

var opacity = .9; 
var A_ofARGB = Math.round(opacity * 255).toString(16); 
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB; 
else if(!A_ofARGB.length) A_ofARGB = "00"; 
alert(A_ofARGB);

來源

2011-09-27 07:11:06

這是不可能的，不透明度由子節點繼承，你不能避免這種情況。爲了讓父母透明，你必須玩定位（絕對）的元素和Z指數

來源

2011-09-27 07:16:46 daveoncode

我不知道這是否改變。但從我的經驗。嵌套元素的最大不透明度等於父親。

這意味着：

<div id="a"> 
<div id="b"> 
</div></div> 

Div#a has 0.6 opacity 
div#b has 1 opacity

有＃B爲#A內，那麼它的最大不透明度始終是0.6

如果#B將有0.5的不透明度。在實際上它將是0.6 * 0.5 == 0.3不透明度

來源

2011-09-27 07:19:13 fmsf

我有同樣的問題，這是我想出的解決方案，這是更容易！

稍作修改1px x 1px透明圖像並保存爲.png文件。

在CSS您DIV，使用此代碼：

background:transparent url('/images/trans-bg.png') repeat center top;

記住的文件路徑更改爲透明圖像。

我認爲這個解決方案適用於所有瀏覽器，可能除了IE 6，但我還沒有測試過。

來源

2012-04-25 21:03:11 2by

.modalBackground 
    { 

     filter: alpha(opacity=80); 
     opacity: 0.8; 
     z-index: 10000; 
    }

來源

2013-08-13 11:29:20

這不會達到預期的效果，而Z指數的濫用使用可能不是好主意 - 更不用說這個用法可能根本沒有任何效果。 –

如果z-index不需要，那麼不要使用z-index屬性..只需使用代碼 –

的其餘部分，那麼唯一的影響是值從asker的情況稍微改變，但提問者希望內部元素看起來不透明。這不會實現。 –

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x;

使用一些圖像的內部圖像，並使用它。

來源

2013-08-13 12:12:58

只是不包括該div的背景顏色，它將是透明的。

來源

2014-07-10 08:55:52 SAF

我想這個操作可能是在談論半透明。 –

-1

<div id="divmobile" style="position: fixed; background-color: transparent; 
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">

來源

2017-08-09 22:40:54 user2134352

您的回答有點短暫的信息...我建議你參加[旅遊]，閱讀[回答]，然後[編輯]你的帖子:) –

雖然答案總是讚賞，這個問題被問5 * *年前**，並已有一個可接受的解決方案。請儘量避免將問題頂到問題的頂端，除非問題還沒有被標記爲已解決，或者您發現了一個新的改進的問題解決方案。還請記住提供一些[**代碼圍繞您的代碼**]（https://meta.stackexchange.com/questions/114762）來幫助解釋它。查看關於如何讓你的答案數的一些技巧的[**寫出很好的答案**]（http://stackoverflow.com/help/how-to-answer）上的文檔:) –