帶不透明邊框的半透明背景色

我想創建一個div，在那裏我可以設置背景色的不透明度爲< 1.邊框應該完全不透明。帶不透明邊框的半透明背景色

這就是我現在所擁有的。

#level_highlight { 
    position: absolute; 
    display: none; 

    border:5px solid gray; 
    background-color: #00FFFF; 
    -webkit-box-shadow: 0px 0px 4px #ffffff; 
     -moz-box-shadow: 0px 0px 4px #ffffff; 
      box-shadow: 0px 0px 4px #ffffff; 

    opacity: 0.4; 
    filter:alpha(opacity=40); /* IE's opacity*/ 

    -webkit-border-radius: 12px; 
     -moz-border-radius: 12px; 
      border-radius: 12px; 

     -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
      background-clip: padding-box;  
}

有人可以建議我應該改變來管理它嗎？

謝謝！

來源

2011-10-08 Navneet

錯誤的標籤，您應該將其歸類爲「css」和「html」。不過，我發佈了一個答案，見下文。 – Pioul

刪除opacity和filter，並把background-color: rgba(0,255,255,0.4)代替。

來源

2011-10-08 11:18:14

如果您將使用單個元素，則不能使用不透明度 - 您需要在包含設置了不透明度的第二個元素的元素上具有邊框。同時請記住，任何文字內容也將變爲半透明。

另一種選擇是對顏色使用alpha濾鏡。您可以通過使用漸變過濾器來實現IE支持。例如這裏：http://jsfiddle.net/dXmQk/

在過濾器上有這個「十六進制代碼」- 的前兩位數字表示的透明度

希望幫助水平！

來源

2011-10-08 11:19:48 lnrbob

帶不透明邊框的半透明背景色

回答

相關問題