html - 为除 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 高。

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

谢谢

score 1 · Accepted Answer

是的，使用：

#border{ display: inline-block; }

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

score 0 · Accepted Answer

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

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

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

.parent * {
 opacity:0.5;
}

2 回答 2