54

I have a container with an opacity of 0.8. At the background, I have an image that shines through the content div. Now, I have a photo of my client in this container. The problem is, that it uses the opacity of the parent element as the opacity for this image is just relative to the container and not to the body.

I have this code:

<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
    Content ...
    <img src="..." style="opacity: 1.0" alt="Photo" />
</div>

This does not work, as explained below.

Has anybody an idea?

PDev
  • 1,472
  • 1
  • 10
  • 12
  • This is your http://jsfiddle.net/yT6nG/134/ ?? what do u need?? – Vaibs_Cool Oct 18 '13 at 19:00
  • [This](http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app) might or might not help you ;-) – Sumurai8 Oct 18 '13 at 19:00
  • 3
    `background: rgba(0, 0, 0, 0.5);` would be your best best. rgba break down: 0, 0, 0, => colors red, green, blue values. a 0.5 => this is the colors alpha or opacity. – Josh Powell Oct 18 '13 at 19:04
  • Thanks for rgba hint - just changed the rgb value to white and replaced the alpha by my opacity. See my edited question – PDev Oct 18 '13 at 19:13
  • Good job mate, one thing to consider, if you care, is for IE 8 and below users. rgba as well as opacity is not supported. – Josh Powell Oct 18 '13 at 19:17
  • thank you! Well, huge surprise, that it is internet explorer again! But it should just show it with white background and not without background, correct? If that is the case, I (and hopefully my client also) can live with it. – PDev Oct 18 '13 at 19:19

7 Answers7

74

Solved this problem by changing it to the following: 

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

Used just rgba alpha instead of opacity. Now it works.

PDev
  • 1,472
  • 1
  • 10
  • 12
11

This might help others who would want to use opacity, preventing a certain child element from getting opaque.

You can use :not() Selector. Take this sample.

<style type="text/css">
    .redbg{
        background-color:red;
    }
    .sample1 :not(.NonOpaque){
        opacity:0.5;
    }
    .sample2:not(.NonOpaque){
        opacity:0.5;
    }
</style>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div class="redbg sample1">
        <div>
            SAMPLE 1.
        </div>
        <div class="NonOpaque">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
</div>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div>SAMPLE 2.</div>
    <div class="redbg sample2 NonOpaque">
        <div style="padding:5px; margin:3px;">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
    <div class="redbg sample2">
        <div style="padding:5px; margin:3px;">
            We are all Opaque.
        </div>
    </div>
</div>

Output:

enter image description here

MasterC0de
  • 147
  • 2
  • 9
  • 2
    I don't understand why this solution doesn't have more votes. The `:not()` does exactly what the example is showing. This solution worked for me. – redeemefy Sep 09 '18 at 00:12
  • This does not answer the question. – IAM_AL_X Feb 16 '20 at 23:21
  • 1
    @Gilbert: This does not answer the question. The problem concerns child-parent relations, and in particular, the inability of a child to express its computed style opacity when the parent has that property set. This answer doesn't even acknowledge the problem, let alone address the problem. Should get votes down, not up. Try setting the 'opacity' of the outer-most (blue)
    , and then you will see the problem. Also, it does not help that the author seems to have the meaning of the word 'opacity' inverted; as though it means 'transparent.'
     – IAM_AL_X Feb 16 '20 at 23:29
  • I'm applying this but half of my div elements disappear smh and the `.enabled` one still disabled. Any Ideas? – eqrakhattak Sep 24 '21 at 18:01
9

As the other answers state, this is not possible using opacity, that is, with this method.

A workaround/hack would be to add position: relative; z-index:2; to the parent element contentContainer. Then to add another element which has the opacity and other stuff on it. This is particularly useful if you have an image as the background

So your markup should look a little like this:

HTML

<div id="contentContainer">
    Content ...
    <img src="..." alt="Photo" />
    <span id="contentBackground"></span>
</div>

CSS

#contentContainer { position: relative; z-index 2; }
#contentBackground {
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: /* stuff */;
}

Note the z-index property. These are important for making sure that the background element sits below the parent and doesn't overlap the content preventing click events.

This method could also be used with pseudo elements (:before or :after) for which you'd need to add content: '';.

Matt W
  • 3,883
  • 3
  • 19
  • 19
4

That’s not possible – opacity is for an element and all it’s content, and you can not “reverse” it.

0.8 times 1.0 is still 0.8, and higher values than 1 are not possible for opacity – so the only thing that you can try to do is take your image out of the container that has opacity, and try to make it look as if it was inside (by positioning it over it, in some way or another).

CBroe
  • 91,630
  • 14
  • 92
  • 150
3

Opacity applies to the element and any children / content in the element.

For partially transparent colos use RGBA bg colours.

For partially transparent background images, a JS/JQ solution is required.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

Use background: rgba(red,green,blue,alpha) may be a good solution ,but,when you use with disabled attribute , you may find it does not work any more in iPhone .

Joy
  • 11
  • 1
0

if you want to still with hex you can change your color from #FFFFFF to #FFFFFFCC. for easy way you can convert rgba to hex in this url :

https://rgbacolorpicker.com/rgba-to-hex

raas
  • 109
  • 3