容器的透明度比childs少 [英] Container with less opacity than childs

问题描述

我要使用背景颜色和不透明度：0.5 制作我的网页，但网页中的内容将具有 opacity：1 作为默认值。

I want to make my webpage with a background-color with opacity: 0.5 but the content inside the webpage will have an opacity: 1, as the default value.

问题是如果我设置 opacity：0.5 到此容器中，此容器内的所有子元素都获得相同的 opacity 值。

The problem is that if I set opacity: 0.5 to the container, all the childs inside this container gets the same opacity value.

我搜索过不透明度规格，发现这一点：

I have searched about opacity specifications and saw this:

继承否

$ b b

但在我的例子中，它是继承的，所以我搜索了一些，并找到另一个透明度规范，其中我看到了：

如果对象是容器元素，使用掩码的每个像素的值来掩盖容器元素的内容与当前背景混合。

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 .

，因为它似乎不可能设置一个父母具有更少的不透明度比它的孩子，有一些解决方法来获得它吗？

So, as it seems that it is impossible to set a parent with less opacity than its childs, is there some workaround to get it?

_{注意： 我认为在这种情况下添加代码并不是很重要（因为您可以轻松地重现代码），但此处我已经创建了一个简单的JSFiddle玩。}

_{Note: I think that in this case is not very important to add code (because you can reproduce it easily) but here I have created a simple JSFiddle "to play" with it.}

提前感谢！

推荐答案

不，不可能。

如果你只想要一个半透明的背景而不影响内容，请使用 rgba 颜色。

If you only want a semi-transparent background without affecting contents, you can use a rgba color.

本规范中扩展了RGB颜色模型，以包含
alpha的颜色。

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>

这篇关于容器的透明度比childs少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！