爲菜單設置不透明度，但保留CSS中的文本不透明

如何創建只有背景透明的菜單？文本應保持不透明（不透明度：1）爲菜單設置不透明度，但保留CSS中的文本不透明

如果我設置

li:hover { 
    opacity: 0.5 
}

整個列表項目變得透明。我如何解決這個問題？

來源

2010-08-19 Rodrigo Souza

CSS3中有一個名爲「rgba」的新值，它允許您使用透明顏色作爲背景顏色。例如：

li:hover { 
    background-color: rgba(255, 255, 255, 0.5); 
}

我相當肯定，應該工作，雖然我只寫了當場所以它可能不是代碼。然而，這會給你的菜單帶來白色的色彩。如果您想了解更多關於RGBA的信息，請點擊這裏：http://css-tricks.com/rgba-browser-support/

來源

2010-08-19 22:46:58 hatkirby

這是最簡單的解決方案，但缺少IE和FF2支持是*大*缺點 – 2010-08-19 22:48:18

對於OP：請注意，CSS3與所有瀏覽器尚不兼容。如果這不會打擾你，這是一個很好的答案。 – 2010-08-19 22:48:53

@皮卡擊敗我。 Haha – 2010-08-19 22:49:11

您不能。透明度級別傳遞給所有子元素。

您的選擇：

放在li的頂部的另一個因素，可能使用position: absolute，具有正常的不透明度設置
使用PNG文件與阿爾法透明度創建不透明效果（需要解決方法才能在IE6中工作）
使用新的rgba顏色屬性，如@hatkirby所示，如果您可以接受inc omplete瀏覽器支持

來源

2010-08-19 22:47:22

你需要使用一個透明的PNG圖像，或rgba colour value，爲<li>的背景，如：

li:hover { 
    background-color: rgba(0, 0, 0, 0.5); 
}

或者：

li:hover { 
    background: url(a-nice-semi-transparent-png-image.png); 

    /* Supplying just the image file here will make the browser repeat the image 
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */ 
}

來源

2010-08-19 22:48:35

我不認爲，這是可能的，試試這個例子：http://jsfiddle.net/578SV/

來源

2010-08-19 22:48:48 davehauser

爲菜單設置不透明度，但保留CSS中的文本不透明

回答

相關問題