Cant stop opacity inheritance on an image.

**TagUK2006** · 03-02-2012 07:40 PM

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 :-)

**TheAliveWinner** · 03-02-2012 11:01 PM

Yes, this is a problem with 'opacity'.

It is inherited only in decreasing manner!

I mean this will work:

HTML Code:

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

But this won't work:

HTML Code:

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

The other day I heard a guy saying that 'jQuery' might be used to resolve this issue!

But I do not know anything about that!

Sorry!

**TagUK2006** · 03-03-2012 05:04 AM

Hi M8,
Its just not happening for me..
I tried it the way you suggested like this..

Code:

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

</style>

Then my HTML

Code:

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

Am I missing something?

Regards as ever :-)

**aj_nsc** · 03-03-2012 07:37 AM

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):

HTML Code:

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

Code:

#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:

Code:

#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.

**TagUK2006** · 03-03-2012 07:04 PM

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_nsc** · 03-03-2012 08:20 PM

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.

Code:

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

**TagUK2006** · 03-04-2012 05:13 AM

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.

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
:-)

Thread: Cant stop opacity inheritance on an image.

Thread Tools

Display

Cant stop opacity inheritance on an image.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions