Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Translucent Divs with CSS

  1. #1
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Translucent Divs with CSS

    Hello, I am making a layout where it has one background image, and a div layout. I can make the divs transparent, but when I do it also makes the images IN thje div layout transparent. Is there anyway using CSS that I can choose which divs are transparent? Please help!

  2. #2
    Join Date
    Nov 2006
    Location
    90 miles north of Las Vegas
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How about, make an image that is semi transparent in photoshop or so and save it as a png. Then the divs that you want transparent, give them that image as a background, thus making the div trans but the content not....

  3. #3
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    style the innerdivs tonot be transperent, Example

    .outer {filter:alpha(Opacity=50);
    opacity:0.5; -moz-opacity:0.5;
    -khtml-opacity:0.5;}
    .inner {filter:alpha(Opacity=100);
    opacity:1; -moz-opacity:1;
    -khtml-opacity:1;}
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    style the innerdivs tonot be transperent
    Doesn't work. Opacity is parsed as a portion of the parent element's opacity.

    Tristan's solution is correct, but you need to use the AlphaImageLoader filter to get IE6 to render the PNGs nicely.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Images are generably "better" I suppose, because it is mostly cross-browser. The hack for IE shouldn't be that hard, but other than that it's supported in most browsers. I know the css opacity support in Opera isn't that good, so the whole image thing is a good alternative.
    - Mike

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Konqueror, too, has no opacity support at the moment.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Since Opera 9 css opacity is supported as it is in FF and Safari:

    Code:
    selector {
    opacity:0.60;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I dont know how to make a semi transparent image though. I have PhotoShop Elements 3. Also, I want to make my layout easily viewed by most. So, will Tristan's idea be safe to use. Will it work with IE, FF, Opera, and the others?

  9. #9
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    anyone?

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    It will work with any browser that supports PNG alpha transparency, which is all current popular browsers except IE6. Apply the AlphaImageLoader filter, and it will work with IE6 as well.

    We don't know how to use your image editing program. Consult the documentation, or get the GIMP.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •