在CSS中改变外层不透明度，而不影响内层。

Question

我想要创建的效果是透明边框效果。我使用了两个div标签来创建盒子，一个用于内部，一个用于外部。以下是我使用的HTML代码：

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

我使用的CSS如下：

这是我用来创建它的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中，它也会更改内部盒子的不透明度。如何更改外部盒子的不透明度而不影响内部盒子的不透明度？

- Ecliptic

Answer 1

使用rgba设置背景颜色：

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

在JSFiddle上查看

rgba是一种定义颜色的方式，包括alpha通道（不透明度）。alpha通道的取值范围为0到1，与不透明度相同。它可以用于任何可以设置颜色的属性：颜色、背景、边框等。

请注意，早期版本的IE不支持rgba颜色；它们只将alpha通道置于1。

- jamesplease

Answer 2

这是工作

.main_box_outer 
{
    display: inline-block;
    background: rgba(0,0,0,.5);
    padding: 1em;
    border-radius: 2em; 
    opacity:1; 
}

- Kishore Kumar