Changing an image opacity

Question

If a section opacity is settled to a certain value, how can I change or disable the opacity of an image inside it? Code demonstration:

CSS

#example1{
    opacity:0.8;
}

HTML

<section id="example1">
    ...
    <img src="a.png">
    ...
</section>

So how can I change the a.png opacity?

Similar concern / answer here: http://stackoverflow.com/questions/10070590/css-opacity-inheritance-issue (and this was marked a duplicate as well)... just fyi. — Stuart Kershaw, Dec 04 '13 at 21:12
consensus appears to be "you can't"... http://stackoverflow.com/questions/12613191/why-cant-child-elements-override-the-opacity-of-parent-with-a-greater-value — dav1dsm1th, Dec 04 '13 at 21:29

Josh Powell · Accepted Answer · 2013-12-07T21:46:41.893

2

You can not change the effect on any of the children that is inside of the parent div.

Let me explain it like this, the opacity is being set on the parent container. Then the children are located inside the parent which are nested nice and cozily in there.

So we have this,

--Parent (opacity start)

-----Child

--End Parent (opacity end)

Since the children are nested inside of the parent container they will then become transparent due to the parent container being transparent.

As others have stated there are a few ways to go about this.

One way is using rgba() (red, gren, blue, alpha) for transparent background colors
Make a child inside of the parent positioned absolute to be the transparent background like so,

--Parent <section>

-----Transparent absolute child

-----Child

--End Parent </section>

My last example, a fun one, to explain this is with the use of Harry Potter.

In the books Harry receives a clock of invisibility. With this cloak, once worn, can make him invisible! This is exactly like your example except you can control the transparency of the object!

Here we go,

--Cloak (parent)

-----Harry Potter (Child)

--End Cloak (end parent)

Since he is inside of his cloak he is therefor invisible, just like your child elements.

Pertaining to the OP's question,

Okay remove the opacity on the #mainWrapper now, where ever you are using this color, #29630E, replace it with, rgba(41, 99, 14, 0.9), and you will not have everything being transparent. What you are doing, without realizing, is making everything on that page transparent. The text, color, images, everything transparent. With the use of rgba you will only be making the background color transparent.

edited Dec 07 '13 at 21:46

answered Dec 04 '13 at 21:42

Josh Powell

6,219
5
31
59

I tried the rgba solution but it doesn't work as I mentioned in the answer below, you have any idea why? – Imri Persiado Dec 04 '13 at 21:51
Okay well the next thing I can ask is, What are you trying to make transparent? – Josh Powell Dec 04 '13 at 21:59
I want to make a section transparent, inside it I want to have a picture which is not transparent. I tried to add the rgba peoperty to the image but it doesn't working as I said in the answer below. – Imri Persiado Dec 04 '13 at 22:03
Okay well one, `rgba` is for color not images and second, what section are you trying to make transparent? some text on top of the image? – Josh Powell Dec 04 '13 at 22:04
The section that wraps the site is transparent since it looks nice with the body background. This part is working fine but the only thing left to do is change somehow the image opacity. – Imri Persiado Dec 04 '13 at 22:10
Can you provide a link to the site? – Josh Powell Dec 04 '13 at 22:11
I'll provide a link to the page with the picture: http://www.spikes.co.il/index.php?a=product&item=2 the site is in hebrew so don't really try to understand it xD – Imri Persiado Dec 04 '13 at 22:15
lol yeah I won't even try to read that, okay remove the opacity on the `#mainWrapper` now where ever you are using this color, #29630E, replace it with, `rgba(41, 99, 14, 0.9)`, and you will not have everything being transparent. What you are doing, without realizing, is making everything on that page transparent. The text, color, images, everything transparent. With the use of `rgba` you will only be making the background color transparent. – Josh Powell Dec 04 '13 at 22:22
1

Thanks for your effort!! That's so nice to have people like you :) – Imri Persiado Dec 04 '13 at 22:27
And sorry for beeing annoying, changing the text opacity now would be a problem or not? – Imri Persiado Dec 04 '13 at 22:28
Your not being annoying at all and you are so welcome! If you want some text to be transparent then you would simply do something like this, `color: rgba(0, 0, 0, 0.4);`. That is #000(black) with a 40% opacity on it, – Josh Powell Dec 04 '13 at 22:31
I mean the text is now transparent, how can I disable the transparent? – Imri Persiado Dec 04 '13 at 22:39
1

Hmm I just checked the site and it doesn't seem to be transparent. – Josh Powell Dec 04 '13 at 22:45
If I will change the opacity to 0.5 you will see that, but you're right you can't even notice. Once again thank you and have a good day! :) – Imri Persiado Dec 04 '13 at 22:48
1

No problem and best of luck in your design! – Josh Powell Dec 04 '13 at 22:51

Rahul Tripathi · Answer 2 · 2013-12-04T21:19:45.127

0

You can use rgba() property like this:

rgba(0, 0, 0, .8);

Something like this:

#example1{
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.8);
}

edited Dec 04 '13 at 21:19

answered Dec 04 '13 at 21:14

Rahul Tripathi

168,305
31
280
331

I'm changing the opacity value from 0.8 to 1, but it stays the same. – Imri Persiado Dec 04 '13 at 21:22
@ImriPersiado:- Are you using the rgba property? – Rahul Tripathi Dec 04 '13 at 21:23
– Imri Persiado Dec 04 '13 at 21:24
@ImriPersiado:- Can you try to put this in your CSS instead of your HTML? – Rahul Tripathi Dec 04 '13 at 21:26
Change it to css: .non_opacity{background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.8);} and it doesn't work.. – Imri Persiado Dec 04 '13 at 21:30
@ImriPersiado:- You dont need this background: rgb(0, 0, 0); Its for the fallback. Just try this: background: rgba(0, 0, 0, 0.8); – Rahul Tripathi Dec 04 '13 at 21:31
Now its: .non_opacity { background: rgba(0, 0, 0, 0.8); } and it's still not working =\ – Imri Persiado Dec 04 '13 at 21:32
Which browser you are using? – Rahul Tripathi Dec 04 '13 at 21:33
Maybe because of what the guy above said: "if the section is already set opacity, you can't reset the opacity of its child" – Imri Persiado Dec 04 '13 at 21:33

score 0 · Answer 3 · answered Dec 04 '13 at 21:18

0

if the section is already set opacity, you can't reset the opacity of its child, but you can do like this, set imitation of opacity via pseude-element, something like this

section{
position:relative;
}

section:before{
 content:'';
 display:block;
 position:absolute;
 top:0;
left:0;
width:100%;
height:100%;
background:rgba(255, 255, 255, 0.5);
}

then play with the opacity of the image as you want

answered Dec 04 '13 at 21:18

Hovhannes Sargsyan

1,063
14
25

The child is the section:before? So the image will be reffered to the section:before? – Imri Persiado Dec 04 '13 at 21:31
No child is the image, :before just overlay for the section - the imitation of the opacity In fact :before also children of the section but used for imitation – Hovhannes Sargsyan Dec 04 '13 at 21:55

score 0 · Answer 4 · answered Dec 07 '13 at 21:53

0

Instead of changing the sections opacity, change the opacity of the children that are not an img. Example

section > *:not(img) {
    opacity: 0.2;
}

answered Dec 07 '13 at 21:53

Bram Vanroy

27,032
24
137
239

Changing an image opacity

4 Answers4