Question

我正在尝试创建一个div，我可以在其中设置背景颜色的不透明度＆lt;虽然边界应该是完全不透明的。

这就是我现在所拥有的。

#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;    
}

有人可以建议我应该改变什么来管理它吗？

谢谢！

Answer 1

删除opacity和filter，然后改为background-color: rgba(0,255,255,0.4)。

Answer 2

如果要使用单个元素，则不能使用不透明度 - 您需要在包含具有不透明度设置的第二个元素的元素上使用边框。还要记住，任何文本内容也将变得半透明。

另一种选择是在颜色上使用alpha滤镜。您可以使用渐变过滤器在IE支持中执行此操作。示例：http://jsfiddle.net/dXmQk/

在过滤器上有“十六进制代码”#9900FFFF - 前两位数字表示透明度

希望有所帮助！

半透明的背景颜色与不透明的边框

2 个答案: