设置除div边框之外的所有内容的不透明度

Question

对，我想要一些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的{​​{1}}或height声明，或将其设为#border

DEMO

Answer 2

您不必使用两个不同的div！只需使用此css语法：

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

如果你不想给每个子元素一个类，你可以使用* selector：

.parent * {
 opacity:0.5;
}