Q

CSS：透明div部分不透明疊加

2013-07-23 155 views 0 likes

0

我正在爲一個網站開發幫助系統，他們希望頁面在激活時變爲不透明，除了您可以獲得幫助的DIV之外。CSS：透明div部分不透明疊加

問題是我無法弄清楚如何讓特定的div在透明背景上「出現」透明。

我試着將div的z-index設置爲比背景更高的值，但似乎不起作用。

這是一個說明問題的JSBin。任何與「幫助」類應該看起來是透明的（即不是不透明）

http://jsbin.com/ifohuc/1/edit

感謝。

2013-07-23 JoshL

+0

我個人更喜歡使用1px x 1px透明.png文件作爲背景 - 圖像在divs上。否則，您也會遇到文本透明的麻煩。有辦法解決這個問題，但如果你不需要經常更改div顏色，我認爲這是一條路。 – JCleveland

A

回答

1

您必須設置li.help的位置屬性在CSS文件

例如

position:relative;

2013-07-23 18:30:56

+0

我同意'@ fa7d0'，這是因爲'z-index'屬性只有在元素設置爲'position：absolute;'時纔有效，或者在這種情況下它可以與'position：relative'一起使用。你的JSBin和它的工作完美后，添加'位置：相對'你的'li.help' – sulfureous

+0

工作，謝謝！ – JoshL

0

變化#bgDiv到z-index= -1

http://jsbin.com/ifohuc/2/

#bgDiv { 
    width: 100%; 
    height: 100px; 
    min-height: 100%; 
    background-color: #999999; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    opacity: 0.85; 
    z-index: -1; 
}

2013-07-23 18:21:00 feitla

相關問題