Cant stop opacity inheritance on an image.

@TagUK2006Mar 03.2012

Hi Guys,

Im going round in circles here with this..

I have a Div and have its opacity set to 0.7 in my style sheet so I can see slightly through it…this is fab!!!

But in the div I have a thumbnail image and its also showing the opacity setting of the div and I dont want this.

I tried to put the image in its own div and set the css to like opacity=1
I also make a class for the image and set it to the same opacity=1

None of these ideas has worked.

I would appreciate any thoughts on how to stop the inheritance on my thumbnail.

Regards as ever 🙂

to post a comment

CSS

6 Comments(s) _↴

@TheAliveWinnerMar 03.2012 — #[I][B]Yes, this is a problem with '[COLOR=DarkRed]opacity[/COLOR]'.[/B][/I]

[B]It is inherited only in [COLOR=Red]decreasing manner[/COLOR]![/B]

[B][I]I mean this will work:[/I][/B]

[code=html]
 <div style="opacity:0.6">
 Main div first part!
 <div style="opacity:0.3">
 Sub div part!
 </div>
 Main div last part!
 </div>
 [/code]

[I][B]But this won't work:[/B][/I]

[code=html]
 <div style="opacity:0.3">
 Main div first part!
 <div style="opacity:0.6">
 Sub div part!
 </div>
 Main div last part!
 </div>
 [/code]

[B]The other day I heard a guy saying that '[COLOR=DarkGreen]jQuery[/COLOR]' might be used to resolve this issue![/B]

[B]

But I do not know anything about that![/B]

[COLOR=Red][B]Sorry![/B][/COLOR] ?

@TagUK2006authorMar 03.2012 — #Hi M8,

Its just not happening for me..

I tried it the way you suggested like this..

<i>
 </i>&lt;style&gt;
 #BoxContainerPopup1{
 width: 600px;
 height: 400px;
 background-color:#000;
 border:1px solid #CCC;
 opacity:0.6;
 filter:alpha(opacity=60); /* For IE8 and earlier */
 cursor:move;
 color: #FFF;
 display:block;    /*set the div in the center of the screen*/
 position:absolute;
 top:20%;
 left:25%;
 margin:20px;
 }
 
 #thumbdiv{
 opacity:0.3;
 filter:alpha(opacity=30); /* For IE8 and earlier */
 float:left;
 margin:20px;
 
 
 }
 
 &lt;/style&gt;

Then my HTML

<i>
 </i>&lt;body&gt;
 &lt;div id="BoxContainerPopup1"&gt;
 Main div first part!
 &lt;div id="thumbdiv" &gt;&lt;img src="images/me.jpg" width="269" height="267" /&gt;&lt;/div&gt;
 Main div last part!
 &lt;/div&gt;
 &lt;/body&gt;

Am I missing something?

Regards as ever :-)

@aj_nscMar 03.2012 — #This is not a problem with opacity, it is this way by design. Nothing can 'fix' it because nothing is wrong with it. What you have to do is use it the way it was designed to be used (which sometimes requires working around what seems to be a problem with the way opacity was designed to work):

[code=html]
 <div id="parent">
 <div class="semi-transparent"></div>
 <div class="opaque">
 Content Content
 <img src="thumb.jpg">
 Content Content
 </div>
 </div>
 [/code]

<i>
 </i>#parent { position: relative; }
 #parent .semi-transparent { position: absolute; top:0; left:0; right:0; bottom:0; background: #fff; opacity: 0.7; z-index: 1;}
 #parent .opaque { position: relative; z-index: 2; }

With CSS3 you can actually use rgba and do this:

<i>
 </i>#parent { background: rgba(255,255,255,0.7); }

And you don't need the semi-transparent div/workaround - but this won't work in IE7/8.

@TagUK2006authorMar 04.2012 — #Thanks aj_nsc's

Im sorry to be slow to respond its been one of those days, Im sitting trying your example now and its looking great except doesnt seem to work in IE im having to click the compatability button for it to work. Works in chrome and firefox though, have i missed something for IE to do it without the need of the compatability view as most people i know wouldnt know to need t hit it?

I need to read some more on the new css :-)

Thanks .

@aj_nscMar 04.2012 — #That's because IE<9 doesn't use opacity it uses filter: alpha(opacity), but because you didn't use that in your original post, then I assumed you must've known about it or didn't care about it.

<i>
 </i>div { opacity: 0.7; } //IE&gt;9 and non-IE
 div { filter: alpha(opacity=70); } //IE&lt;9

@TagUK2006authorMar 04.2012 — #Thanks aj_nsc's ,

That got it :-)

I did have that origonaly but when I read your post and didnt see it in your code I figured Id follow what you were saying and not need it.:eek:

I get in a pickle at times with all the browsers old and new and whats what with what i all need to remember, so I appreciate this forum.

Can you reccomend a good site I can use as an aid in reading material on all the main differences I should always remember between the browsers and css needed to keep each happy in given circumstances.

Thanks again

:-)

Also in #CSS _↴

Putting list items across multiple columns Beautiful website css ?How to add particular css to div name?

Success!

Help @TagUK2006 spread the word by sharing this article on Twitter...

Tweet This

Cant stop opacity inheritance on an image.

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Cant stop opacity inheritance on an image.

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴