www.webdeveloper.com
Results 1 to 7 of 7

Thread: Cant stop opacity inheritance on an image.

  1. #1
    Join Date
    Mar 2007
    Posts
    156

    Question Cant stop opacity inheritance on an image.

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

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    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!

  3. #3
    Join Date
    Mar 2007
    Posts
    156

    Question

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

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    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.

  5. #5
    Join Date
    Mar 2007
    Posts
    156

    Thumbs up

    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 .
    Last edited by TagUK2006; 03-03-2012 at 08:24 PM.

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    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

  7. #7
    Join Date
    Mar 2007
    Posts
    156

    Thumbs up

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles