Question

基本上，我的div背景设置为图片，opacity为0.5。在div内，我尝试将相同的img放置为圆圈。但是，它也会得到0.5 opacity。

确保不会发生这种情况的好方法是什么？

<div class="bg-img" ng-style="{'background':'url({{vm.large}}) center / cover'}">
    <img ng-src="{{vm.large}}">
</div>

.bg-img {
    height: 140px;
    position: relative;
    opacity: 0.6;
}

.bg-img img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
}

Answer 1

<强>更新 rgba语法不适用于背景图像。在这种情况下，Michael_B的答案会更好。

<强>更新

this SO post可以获得更好的解释。

<强>原始

opacity应用于完整的子树。如果您不希望将其应用于子元素，则可以使用rgba语法as suggested by MDN。

示例：background: rgba(0, 0, 0, 0.6) url(<your_url>);

Answer 2

使用opacity，效果将应用于整个元素，包括子元素和内容。

来自MDN：

该值适用于整个元素，包括其内容，即使该值不是由子元素继承的。因此，一个元素及其包含的子元素都具有相同的不透明度到元素的背景，即使元素及其子元素不同的不透明度相互之间。

此规则的例外情况是background-color设置为rgba()。

rgba()规则允许通过Alpha频道设置opacity。

因此，您可以将父级设置为div { background-color: rgba (0, 255, 255, 0.5); }，这样就可以仅opacity将0.5设置为background-color。子元素不受影响。

点击此处了解详情：A brief introduction to Opacity and RGBA

如果必须使用图片，请参阅以下文章：

允许容器上的不透明度，但不允许子元素

2 个答案: