我想要创建的效果是透明边框效果。我使用两个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中。如何在不影响内框不透明度的情况下更改外部不透明度?
答案 0 :(得分:5)
使用rgba作为背景颜色:
{ background: rgba(0,0,0,.5); }
rgba是一种定义颜色的方法,包括 alpha通道(其不透明度)。 alpha通道从0变为1,就像不透明度一样。它可用于任何可以设置颜色的属性:颜色,背景,边框等。
请注意,早期版本的IE不支持rgba颜色;他们只是将alpha通道置于1。
答案 1 :(得分:0)
这是工作
.main_box_outer
{
display: inline-block;
background: rgba(0,0,0,.5);
padding: 1em;
border-radius: 2em;
opacity:1;
}