透明菜單/導航欄

我無法解決一個CSS問題。透明菜單/導航欄

我有一個導航欄應該是透明的。但由於opacity屬性以及它們是透明導航欄的子元素，所以其上的鏈接也會變得透明。

你能幫我解決嗎？

2013-03-01 christophe

您可以在這裏或通過pastebin提供代碼示例，以便我們可以更好地爲您提供幫助。 – Si8 2013-03-01 16:28:20

http://jsfiddle.net/kCQ7L/ – christophe 2013-03-01 16:38:29

修改您的.container類規則 – Fico 2013-03-01 17:37:13

如果你不想影響你的鏈接文字應修改規則來進行.container選擇看起來像這樣

.container { 
     width: 100%; 
     height: 90px; 
     margin: 0 auto; 
     background-color: rgba(255,255,255,0.5); 
}

它會保持你的背景顏色設計，而不會影響你的文字透明度，以及在這裏說過幾次，影響元素及其子元素

使用不透明度。文本受到影響

enter image description here

使用RGBA（255,255,255,0.5），孩子們沒有受到影響

enter image description here

取的，可以採取適當的行動的JavaScript和懸停的情況下其他規則照顧小提琴here Bis spater

2013-03-01 17:19:39 Fico

非常感謝你！ – christophe 2013-03-02 09:04:45

這種方法的兼容性是什麼？ – 2014-08-16 19:44:35

解決方案很簡單。只需將background-color CSS屬性設置爲transparent即可。

.nav { 
    background-color: transparent; 
}

2013-03-01 16:29:08 Licson

我那樣做當然。我會舉一個例子 – christophe 2013-03-01 16:32:34

http://jsfiddle.net/kCQ7L/ – christophe 2013-03-01 16:38:11

在css3中，您可以使用透明背景，而不是使整個面板透明。

要添加透明顏色，您可以執行：rgba(255,255,255,.5)其中.5是不透明度。

2013-03-01 16:30:27

http://jsfiddle.net/kCQ7L/ – christophe 2013-03-01 16:37:03

我用所需的不透明度使用透明png圖像（bg.png），而ca這是這樣的：

.menu 
{ 
    background: url('bg.png') repeat; 
}

該png圖像可以是小的，甚至1x1像素。 repeat將完全填充background空間。

2013-11-09 15:22:09 iorgu

你應該嘗試一個簡單的CSS背景屬性。

.navbar 
{ 
    background-color: transparent; 
}

2016-08-27 11:47:27

回答