如何将非透明文本放入opac div框中

Question

我能看到这个工作的最好方法是使用position：absolute和z-axis在不透明度上移动文本：0.5框。有没有更好的方法来实现这一目标？

<div style="opacity:0.5;height:50px;width:150px;">
  <p> I want this to be non transparent </p>
</div>

Answer 1

使用带alpha的背景颜色，这样孩子就不会继承不透明度：

<div style="background-color: rgba(255, 255, 255, 0.5);height:50px;width:150px;">
  <p> I want this to be non transparent </p>
</div>

使用rgba，alpha的定义范围为0-1。在该示例中，0.5用于显示50％的不透明度。您可以按此比例调整不透明度。