Results 1 to 5 of 5

Thread: Who supports PNG opacity?

  1. #1
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Unhappy Who supports PNG opacity?

    Hey I was using a PNG at 50% opacity as the background for a floating div... well, it looks fine on my desktop... but when i view it on my laptop it's a plain white background... is there any reason for this? Both use IE, desktop uses latest version, laptop uses older version... this made me wonder... are there other browsers that don't support this form of tranlucency? Can this be "worked around"? Is there another way to code it to make it work? I'm trying to accomplish it with strictly css... somebody told me about something like "filterrogid:microsoft" blah blah blah... I don't know exactly how to implement such code. Any help would be greatly appreciated. Thanks.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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

    Default

    Yes, IE<7 doesn't support PNG alpha transparency. To make it work in IE6, you must apply:
    Code:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png');
    to the element.
    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!

  3. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default Ok, partially fixed...

    Ok, so it worked on ONE of the images I was using but it was a full sized image not being used as a background image... The other is a 4x4px background image... and I can't get it to work on that one... Here is the code I'm using...

    Code:
    .trans_div {
    width: 164px;
    height: 107px;
    position: absolute;
    left: 650px;
    top: 173px;
    font-weight:bold;
    padding:1px;
    border:solid 1px bcac75;
    overflow:auto;
    background:url('http://www.waldronar.com/Design/Myspace/Tech-Grunge-Overlay/images/50-Percent.png');
    background-repeat:repeat;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.waldronar.com/Design/Myspace/Tech-Grunge-Overlay/images/50-Percent.png');
    
    }

    Code:
    <div class="trans_div">
    <center>
    <a href="http://en.wikipedia.org/wiki/Epitome"><em><font size="1" color="bcac75">Epitome</em></a> of my <a href="http://en.wikipedia.org/wiki/Narcissism"><font size="1" color="bcac75">Narcissism</a>...<br style="clear:both;">
    <a href="http://hotornot.com/r/?eid=AYBREMR-ARA">
    <img src="http://pix2.hotornot.com/s/AYBREMR-ARA.jpg" class="hot">
    <br style="clear:both;">
    <font face="verdana" size="1" color="bcac75">www.hotor<em>not</em>.com</a></center>
    </div>
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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

    Default

    Try using sizingMethod=crop on that filter as well.
    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
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default Crop

    Thanks... That worked. I appreciate the help.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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
  •