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

【问题标题】：Setting opacity for everything except border of divs为除 div 的边框之外的所有内容设置不透明度
【发布时间】：2012-10-03 03:27:48
【问题描述】：

是的，我想要一些 div，其中的所有内容都具有一定的不透明度，但 div 的边框是正常的。现在我知道当您为 div 设置不透明度时，它会将其应用于所有内容。

所以。我曾尝试将它们分成两个 div，如下所示：

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

与

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

.content{
opacity:0.1;
}

这给出了我想要的不透明度，但它没有正确的高度或宽度。我不想在#border 中定义宽度（我有随机尺寸）它似乎使它成为全屏宽度和 0px 高。

或者，有没有人有任何替代方法？

谢谢

【问题讨论】：

【解决方案1】：

是的，使用：

#border{ display: inline-block; }

同时删除 width 或 height 的任何声明 #border 或将它们设置为 auto

【讨论】：

【解决方案2】：

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

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

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

.parent * {
 opacity:0.5;
}

【讨论】：