css - 不透明度低于 child 的容器

Question

我想用 background-color 和 opacity: 0.5 制作我的网页，但网页内的内容将有 opacity: 1，作为默认值。

问题是，如果我将 opacity: 0.5 设置为容器，则此容器内的所有子项都将获得相同的 opacity 值。

我搜索了关于 opacity specifications 的内容并看到了这个:

Inherited No

但在我的例子中它是被继承的所以我搜索了更多并找到了另一个 transparency specification我在其中看到了这个:

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .

因此，似乎不可能将父项的不透明度设置为低于其子项的不透明度，是否有一些解决方法可以做到这一点？

_{注意:我认为在这种情况下添加代码不是很重要(因为你可以很容易地重现)但是here我创建了一个简单的 JSFiddle 来“玩”它。}

提前致谢!

Answer 1

不，这不可能。

如果你只想要半透明背景而不影响内容，你可以使用 rgba color .

The RGB color model is extended in this specification to include “alpha” to allow specification of the opacity of a color.

例如，

body {
  background: linear-gradient(to right, #fff, #ff0, #0ff);
}
p {
  background-color: rgba(0, 0, 255, 0.3); /* semi-transparent solid blue */
  padding: 70px;
}

<p>Semi-transparent background but fully opaque text</p>