允许容器不透明，但不允许子元素 [英] Allow opacity on container but not child elements

问题描述

基本上，我有一个div，背景设置为图像，opacity为0.5.在div内，我试图将相同的img放置为一个圆圈.但是，它也得到0.5 opacity.

Basically, I have a div with background set to an image and opacity of 0.5. Inside the div, I am trying to place the same img as a circle. However, it gets the 0.5 opacity too.

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

What is a good way to make sure this doesn't happen?

<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;
}

推荐答案

更新 rgba语法不适用于背景图像.在这种情况下， Michael_B 的回答会更好.

Update The rgba syntax does not work for background image. Answer by Michael_B is better in this case.

更新

可以在此SO帖子中找到更好的解释.

A better explanation is available at this SO post.

原始

opacity应用于整个子树.如果您不希望将其应用于子元素，则可以使用rgba语法

opacity is applied to the full sub-tree. If you don't want it to be applied to child element, you can use rgba syntax as suggested by MDN.

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

这篇关于允许容器不透明，但不允许子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！