半透明背景色，边框不透明 [英] Translucent background color with opaque border

问题描述

我正在尝试创建一个div，可以在其中将背景色的不透明度设置为< 1.边框应该完全不透明.

I'm trying to create a div which where I can set the opacity for the background-color to be < 1. The border though should be totally opaque.

这是我目前为止的情况.

This is what I have as of now.

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

有人可以建议我应对它进行更改吗?

Could somebody suggest what I should change to manage it?

谢谢！

推荐答案

删除opacity和filter，然后放入background-color: rgba(0,255,255,0.4).

这篇关于半透明背景色，边框不透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！