如何使導航欄透明

我在PureCSSMenu.com上創建了一個導航欄，但該站點沒有提供使導航欄透明的方法。是否可以調整代碼以使其透明？如何使導航欄透明

您可以查看下面的導航欄：

http://spectrum.x10.mx/navbar.html

2013-06-11 user2476041

您希望[不透明度]（https://developer.mozilla.org/en-US/docs/Web/CSS/opacity）或[rgba]（https://developer.mozilla.org/en-US/docs/Web/CSS/color_value＃rgba（）） – benastan

'opacity'不可取 - 它也會使內容（如項目的實際文本）變得透明並且不易讀。在背景上使用'rgba'。 –

在你的CSS的線16條，在規則ul.pureCssMenu, ul.pureCssMenu ul，改變背景顏色：

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

你現在有#ffffff那裏，意義背景是不透明的白色。 RGBA表示法包含一個Alpha通道，在本例中設置爲0.5半透明度。 1是完全不透明的，0是完全透明的。

同樣適用於第42行中的a元素的規則，但我建議完全刪除其背景顏色 - 堆疊半透明顏色並不實際。

來源

2013-06-11 21:52:59

感謝Niels的回覆rgba更改無法正常工作，因此我刪除了背景顏色的所有實例：#ffffff;這似乎工作。我在Chrome和IE瀏覽器中查看過，看起來沒問題。我不知道它會如何看待舊版瀏覽器，但哦，哈哈。 – user2476041

如果'rgba'不工作，你需要[絕望地更新你的瀏覽器]（http://caniuse.com/css3-colors）。 –

的確，再次感謝我的朋友。 – user2476041

如何使導航欄透明

回答

相關問題