Question

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

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

我搜索了opacity specifications并看到了这个：

继承否

但在我的情况下，它是继承的，所以我搜索了一下，找到了另一个transparency specification，其中我看到了这个：

如果对象是一个容器元素，那么效果就好像容器元素的内容使用掩码在当前背景中混合，其中掩码的每个像素的值都是。

因此，似乎不可能设置不透明度低于其子级的父级，是否有一些解决方法可以获得它？

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

提前致谢！

Answer 1

不，这是不可能的。

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

RGB颜色模型在本规范中扩展为包括 “alpha”允许指定颜色的不透明度。

例如，

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

不可能。父容器的不透明度也适用于子容器。如果您想要具有不透明效果的背景，可以使用RGBA作为背景颜色。这适用于纯色，也可以选择使用渐变色。

如果您有想要使用的图像，可以使用div /容器将图像绝对定位在内容后面。给那个容器一个不透明度和一个位置。

不透明度低于儿童的容器

2 个答案: