設置不透明度，除了div邊框之外的任何東西

Question

Right我想要一些div，裏面的所有東西都有一定的不透明度，但div的邊界是正常的。現在我知道當你爲div設置不透明度時，它將它應用於一切。

所以。我試圖分裂他們變成兩個div像這樣：

<div id="border"> 
<div class="content"> 
hello 
</div> 
</div> 

與

#border{ 
border: 1px solid #000; 
} 

.content{ 
opacity:0.1; 
} 

這給了我想要的不透明度，但它不具備正確的高度或寬度。我不想在#border中定義寬度（我有隨機大小）它似乎使其全屏寬度和0px高。

另外，沒有人有任何替代方法？

感謝

Answer 1

是，使用：

#border{ display: inline-block; } 

也去除width或height任何聲明#border或將它們設置爲auto

DEMO

Answer 2

你不必使用兩個不同的divs！只要使用這個CSS語法：

.parent { 
border:1px solid black; 
} 
.parent .child { 
opacity:0.5; 
} 

，如果你不想讓每個孩子元素，您可以使用*選擇一類：

.parent * { 
opacity:0.5; 
}