透明元素内部的非透明元素

2018 年更新：虽然我们仍然没有像 background-opacity 这样的东西，但我们现在有了 rgba() 和 hsla()，这将是本文中纯色解决方案的简单方法。

读者 Shane 发表了评论

如果在块级元素上使用透明度，它也会使内部文本变得透明。有没有办法防止这种情况发生？我尝试将文本放在另一个 div 中并将不透明度设置为 100%，但这并没有奏效。虽然，从逻辑上讲，我认为它会起作用！

从逻辑上讲，这对我来说是有道理的。它在实践中是这样运作的吗？当然不是。在我看来，这是 CSS 的一个主要缺陷。人们只是**期望**这成为可能。这在印刷设计中是一种非常常见的特效。不幸的是，在网络上并非如此简单。以下是一种解决此问题的方法。

首先，您创建一个条形，确保使用所有浏览器的 CSS 设置。这是该条形

<div class="bar">
  <h2>Some mild-mannered text trapped inside a bar.</h2>
</div>

这是您对其进行样式设置的方式

.bar {
  height: 4em;
  padding-top: 2em;
  opacity: 0.5;
  background: black;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin-top: 5.0em;
}

在这里，您会注意到条形内的文本采用了条形本身的透明度。您不希望这样，它会使文本难以阅读！因此，您变得聪明，将 div 内部的文本应用 100% 的透明度。不起作用，对吧？

您必须诉诸一些技巧。

据我所知，没有办法强制这些子元素的透明度**低于**其父元素。而解决方案就在其中。如果该子元素在技术上不是子元素会怎样。

如您所知，仅仅因为一个元素占据了与另一个元素相同的空间，并不意味着一个元素是另一个元素的子元素。这就是 CSS 定位的魅力所在。因此，将我们的非透明文本放入透明 div 的技巧只是将该文本放在div 的外部，并使用一些 CSS 定位将其视觉上推入内部。

我们将按照以下步骤操作

<h2 class="ontop">Haha! I'm free of my transparent prison.</h2>
<div class="bar"></div>

注意应用于文本的类。现在，您必须使用 CSS 定位执行任何需要执行的操作，以将其放置在需要的位置。负边距是一种流行的方法。在这里，我只是设置了顶部位置

h2.ontop {
  position: relative;
  top: 4.7em;
}

查看演示