在不影响CSS内部的情况下更改外部不透明度

Question

我想要创建的效果是透明边框效果.我使用两个div标签创建了盒子,一个用于内部,一个用于外部.`

我用于此的HTML是:

<div class="main_box_outer">
    <div class="main_box_inner">
    </div><!--/ inner-->
</div><!--/ outer-->`

我用来创建它的CSS是:

.main_box_inner {
width: 30em;
height: 20em;
background: white;
border-radius: 1em; }


.main_box_outer {
display: inline-block;
background: black;
padding: 1em;
border-radius: 2em; 
opacity:1; }

但是,当我在CSS中更改外框(边框)的不透明度时,它还会更改内框的不透明度,因为内框div包含在外框div中.如何在不影响内盒不透明度的情况下更改外部不透明度？

Answer 1

使用rgba作为背景颜色:

{ background: rgba(0,0,0,.5); }

在JSFiddle上查看

rgba是一种定义颜色的方法,包括alpha通道(不透明度).alpha通道从0变为1,就像不透明度一样.它可用于任何可以具有颜色集的属性:颜色,背景,边框等.

请注意,早期版本的IE不支持rgba颜色; 他们只是将alpha通道置于1.