在不影響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); } 

View on JSFiddle

RGBA是一種方法來定義包括alpha通道（其不透明度）的顏色。 alpha通道從0到1，就像不透明一樣。它可以用於任何可以設置顏色的屬性：顏色，背景，邊框等。

請注意，早期版本的IE不支持rgba顏色;他們只是放置在1

Answer 2

alpha通道這是工作

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