如何在不影響CSS 3中的孩子的情況下使div透明？

-3

如何讓一個div透明不影響孩子的CSS 3如何在不影響CSS 3中的孩子的情況下使div透明？

這裏是我的HTML代碼：

<div id="icon"> 
    <ul> 
     <li><a href=""><img src="Iconpaper.png"></a></li> 
     <li><a href=""><img src="Movies.png"></a></li> 
     <li><a href=""><img src="Phone.png"></a></li> 
     <li><a href=""><img src="Stocks.png"></a></li> 
     <li><a href=""><img src="Love.png"></a></li> 
    </ul> 
</div> 

<div id="search"> 
    SEARCH 
</div> 

</div>

和這裏的CSS： -

#header{ 
    background-color:#000; 
    width:1349px; 
    height:60px; 
    position:fixed; 
    z-index:2; 
    opacity:0.7; 
    } 
#icon{ 
    float:left; 
    padding:10px; 
    } 
li{ 
    display:inline; 
    } 
#header img{ 
    width:35px; 
    height:35px; 
    } 
#search{ 
    float:right; 
    color:#e5e5e5; 
    padding:20px; 
    font-size:20px; 
    }

如此，我想讓#header div在不影響#icon和#search div的情況下透明化並修復。

來源

2013-10-06 Rahul Khatri

肯定是[如何不應用不透明度的子元素？]（http://stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element）（[和許多，許多其他]（https://www.google.co.uk/search?q=opacity+children+stack+overflow））。 –

如果你只是想讓背景顏色透明，那麼你可以使用'rgba'並移除'opacity'。 –

代替使用opacity的，使用rgba()像background: rgba(0,0,0,.7)其中a代表阿爾法/不透明度。因此，改變下面的代碼塊如

#header{ 
    background-color: rgba(0,0,0,.7); /* 0.7 Opacity for black */ 
    width:1349px; 
    height:60px; 
    position:fixed; 
    z-index:2; 
}

來源

2013-10-06 17:54:57

謝謝，這是我需要的確切的東西。 –

@RahulKhatri考慮通過點擊除了我的答案之外的勾號來標記答案是正確的，這樣可以幫助遊客參考 –

@ Mr.Alien謝謝！這很完美 - 正是我需要的！ – Filth

在CSS中，孩子的不透明度總是根據父親的不透明度進行計算。所以要回答你的問題，你不能將父母的不透明度設置爲0.5，並且仍然讓孩子顯示不透明度爲1.0。

實施例：

父元素：opacity: 0.5;（實際不透明度= 0.5）
子元素：opacity: 1.0;（實際不透明度爲0.5 * 1.0 = 0.5）

來源

2013-10-06 17:50:54

使用重複的半透明png作爲背景或使用rgba顏色值。

來源

2013-10-06 18:03:12 Jeffpowrs

如何在不影響CSS 3中的孩子的情況下使div透明？

回答

相關問題