css - 在不影响 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。

Answer 2

这是工作

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