Allow opacity on container but not child elements

Question

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

@user1354934 after reading your question for a few more times, is the effect that you want to achieve an rectangular image that is opaque in the center circle but faded in other area? If that's the case, `rgba()` might not be able to help. — PSWai, Dec 07 '15 at 02:45

score 5 · Answer 1 · edited May 23 '17 at 12:08

5

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

Update

A better explanation is available at this SO post.

Original

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.

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

edited May 23 '17 at 12:08

Community

1
1

answered Dec 07 '15 at 02:26

PSWai

1,198
13
32

score 4 · Answer 2 · edited May 23 '17 at 12:22

With opacity, the effect applies to the entire element, including child elements and content.

From MDN:

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

The exception to this rule is background-color set with rgba().

The rgba() rule allows for the opacity to be set via the alpha channel.

So you could set the parent to div { background-color: rgba (0, 255, 255, 0.5); }, and that would set the opacity to 0.5 on the background-color alone. Child elements would be unaffected.

Learn more here: A brief introduction to Opacity and RGBA

If using an image is a must, see these posts:

Allow opacity on container but not child elements

2 Answers2

Linked

Related