SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    transparent div how to

    Hi All,

    I want to have a transparent div that does not affect the content. I have applied transparency to the header section, which contains a navigation div and a logo div, but do not want the transparency to apply to those two other divs.
    Is there a way to fix this.

    I used the following code:

    HTML Code:
    {
    	zoom: 1;
    	filter: alpha(opacity=50);
    	opacity: 0.5;
    }

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Yeppoon, QLD, Australia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opacity values will always cascade down to child elements - you can't have opacity:0.5 on a parent div, then set opacity:1 to a child div.

    Will using a 50% transparent PNG or rgba value on the header div do the same job?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jylan View Post
    Will using a 50% transparent PNG or rgba value on the header div do the same job?
    Yes, that's a good option that works across older browsers too. But what I'd do these days is use RGBA:

    Code:
    div {
      background: rgba(256,256,256,0.5);
    }
    That's a white background set to 50% opacity. You can, of course, change that to any other RGB color.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, that's a good option that works across older browsers too. But what I'd do these days is use RGBA:

    Code:
    div {
      background: rgba(256,256,256,0.5);
    }
    Thanks mate, works like a charm.



    That's a white background set to 50% opacity. You can, of course, change that to any other RGB color.


Bookmarks

Posting Permissions

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