CSS：如果使用不透明度DIV，裏面的一切是打火機

我有這樣的結構：CSS：如果使用不透明度DIV，裏面的一切是打火機

<div class="abc"> 
    <ul> 
    <li>something</li> 
    ... 
    </ul> 
</div>

我需要應用在abc div則透明度選項。如果我這樣做，它可以工作，但<ul>中的文字具有不透明性，因爲abc DIV =><ul>中的文字較淺。

有什麼辦法可以在DIV（背景）上應用opacity，但不能在DIV內部的內容上使用？

謝謝

來源

2013-03-01 user984621

背景是顏色還是圖像？ – 2013-03-01 14:34:00

http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-effect-in-child-div&& http://stackoverflow.com/中的可能重複問題/ 7605462/how-do-i-remove-parent-opacity-in-css – Mark 2013-03-01 14:36:18

沒有拉UL出來的div，我能想到的唯一辦法做到這一點是使用RGBA如果是純色，使背景顏色部分透明：

background-color:rgba(0,0,0,.5);

這使背景以50％的不透明度變黑，但只適用於較新的瀏覽器。

的jsfiddle：http://jsfiddle.net/jdwire/XzeGE/

爲了支持舊的瀏覽器，你可以改爲使用Base64編碼一個微小的PNG到CSS（或只是引用外部圖像）。有關更多信息，請參閱http://en.wikipedia.org/wiki/Data_URI_scheme，有關在css或html中嵌入base64編碼圖像的缺點，請參閱https://stackoverflow.com/a/5258101/1721527。

如果背景是一個圖像，只是使其成爲一個部分透明PNG。

來源

2013-03-01 14:37:09

這絕對是要走的路，如果它是一種顏色或梯度 – 2013-03-01 14:40:39

如果背景是，你可以使用一個rgba背景顏色這樣的顏色：

background-color: rgba(0, 0, 0, 0.5);

這將產生一個黑色的背景透明度爲50％，而不影響透明度子元素。

請注意，這不適用於舊版本的IE（6 & 7我認爲）。

來源

2013-03-01 14:35:45

你需要與內容一個單獨的股利，並設置它的位置在不透明的div像這樣：

<div class="container"> 
    <div class="opacity"></div> 
    <div class="content"></div> 
</div>

CSS

.container{ 
    position:relative; 
} 
.opacity{ 
    //desired opacity here 
} 
.content{ 
    position:absolute; 
    top:0; 
    left:0; 
}

rgba像其他的答案說的也是如果我們在這裏討論背景顏色，這是一個好方法。

來源

2013-03-01 14:36:51 user2019515

完成，謝謝！ :) – user2019515 2013-03-01 14:42:21

嘗試RGBA相反

background-color: rgba(0,0,255,0.5);

這裏，最後的值表示0到1級

來源

2013-03-01 14:37:48 gtamil

你試過申請不透明度爲內部元件的透明度？例如：

div { 
    opacity: .... 
} 

div ul { 
    opacity: ..... 
}

來源

2013-03-01 14:39:11

這似乎並沒有使ul完全不透明。請參閱http://jsfiddle.net/jdwire/pjL3K/。 – 2013-03-01 14:53:32

只有在您計劃擁有背景圖像時才使用此選項。爲顏色指定一個Alpha值。

http://jsfiddle.net/jU8MT/

<div class="abc"> 
    <div class="bgd"></div> 
    <ul class="def"> 
    <li>something</li> 
    </ul> 
</div> 


.abc { 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 
.bgd { 
    background: red; 
    opacity: 0.1; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; 
} 
.def { 
    z-index: 1; 
}

enter image description here

來源

2013-03-01 14:39:42

之前，我做任何事情，因爲涉及到Internet Explorer，我首先調用HTML 5墊片，以我的頭

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements --> 
<!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
<![endif]--> 

<!--The fav and touch icons -->

現在

在你的CSS文件，

div.abc ul { background-color: #333; } 

div.abc ul li{background-color: #333;}

我想這就是你要找的東西？

來源

2013-03-03 16:14:24 Tamara

CSS：如果使用不透明度DIV，裏面的一切是打火機

回答

相關問題