WordPress.org

Ready to get started?Download WordPress

Forums

Semi-Transparent backgrounds (25 posts)

  1. Stevarino
    Member
    Posted 10 years ago #

    While these tricks are definately cool, they are non-standard attributes to css. This means that they will probably never be fully supported by everyone for one reason or another. No clue if the w3c is even considering anything like this...
    However, I do remember some specific filters developed for IE 4 that work. Combine that with the mozilla-specific code, and that takes care of modern IE and Gecko-based browsers. A decent start.

  2. newt
    Member
    Posted 10 years ago #

    Thanks! I'll check that out. I have a nasty little habbit of forgetting that not everyone uses Mozilla browsers and once I get it to look good in Firebird/Firefox/lets-all-play-with-matches I leave it at that. I'm trying to get my site a) compatible across the board and b) tweaking it to adjust to changes in browsers and such.

  3. Stevarino
    Member
    Posted 10 years ago #

    Ahh, here we go: http://www.quirksmode.org/css/opacity.html
    A guide to just what you wanted, including safari! I believe that would be a good amount of browser-market space. :D

  4. newt
    Member
    Posted 10 years ago #

    I think I'm confused. It says Safari allegedly needs -khtml-opacity but does not show what the attribute is (i.e.: .5 or (opacity=50) ) needs to be. And I don't know what exactly to put for IE. It says I need to specify a height or width by WHERE do I specify it? I'm hoping width: auto; will work since that's what it's set at in my CSS =P
    Thanks for your help with this! I think this is something I'll have to play around with.

  5. Stevarino
    Member
    Posted 10 years ago #

    Courtesy of our counterparts at webmasterworld, here's the code for it to work:
    Explorer:
    filter: alpha(opacity=50);
    Mozilla (not Netscape?!?):
    -moz-opacity: .5;
    Safari:
    -khtml-opacity: .5;
    Nothing on opera, though. Anybody care to check (can't install it on this box).

  6. Anonymous
    Unregistered
    Posted 10 years ago #

    No chance this works in NN4 I suppose? :-)

  7. Anonymous
    Unregistered
    Posted 10 years ago #

    Thank you for posting a link to a members only site here. I have no desire to part with my credit card details.

  8. NuclearMoose
    Member
    Posted 10 years ago #

    newt,
    Another possible solution would be to simply create graphics with the amount of transparency desired and use that, rather than using CSS or other work-arounds to do the transparency for you.

  9. newt
    Member
    Posted 10 years ago #

    NuclearMoos: That makes WAY too much sense! What would be the fun in that? =P

  10. WillM
    Member
    Posted 10 years ago #

    What would make most sense of all would be for IE to support the .png format properly, so that we could make semi-transparent images and backgrounds that would actually BE semi-transparent across all browsers.
    </rant>

  11. Stevarino
    Member
    Posted 10 years ago #

    WillM, agreed. One thing I desperately want from IE-PNG support is true anti-aliased text in images. It's one thing for microsoft to ignore the png standards, but making up their own to replace what should work? It just doesn't make sense...
    </chewbacca defense>

  12. bestfoot
    Member
    Posted 10 years ago #

    Thank you for posting a link to a members only site here. I have no desire to part with my credit card details.
    Well you can solve that. Go to webmaster's world and register (it isn't mandatory to donate) or if you choose not to do that, go to site search and search for the article number thus "forum21/7158.htm". It will come up even if not registered.

  13. Anonymous
    Unregistered
    Posted 10 years ago #

    Already made and freely offered translucent backgrounds <http://www.wannabegirl.org/translucent/>

  14. Anonymous
    Unregistered
    Posted 10 years ago #

    For those of us who are not photoshop wizards this link is very handy. Thanks.

  15. Amy
    Member
    Posted 10 years ago #

    Awesome! I tried the tutorial and worked beautifully.

  16. carthik
    Member
    Posted 10 years ago #

    Anon : to get some, you have to give some. You gotta learn photoshop(buy it first ofcourse) , register at wmw(if you want their suggestions), and do whatever else is neccesary IF you want the job done.
    Not everything is wordpress, not everything is free.

  17. Anonymous
    Unregistered
    Posted 10 years ago #

    Just because I am not a photoshop wizard does not mean I do not have it installed. Or that I do not know how to use it. British understatement is not the same as incompetence. (Generally speaking!) :)

  18. Anonymous
    Unregistered
    Posted 9 years ago #

    For the life of me, I cannot get this to work. Does anyone have any extra tips for me?
    I'm pretty new to HTML and CSS so I'm sure it's something completely silly, some kind of over-ride or something.
    Thanks,
    Crystal

  19. pvicnan
    Member
    Posted 9 years ago #

    Hmm.. I personally used a tanslucent .png file, and just made it into a background graphic. It seemed to me the easiest way to do it (mainly because I am rather hopless at CSS of HTML!). Is my solution too messy?

  20. eke
    Member
    Posted 9 years ago #

    check out "a list apart". they have articles on PNG transparency, since IE cant cope with transparent pngs you'll have to do a png/gif solution.
    http://www.alistapart.com/articles/pngopacity/

  21. Anonymous
    Unregistered
    Posted 9 years ago #

    Throw this into your css, whatever divs you want to be transparent set class="transparent", make a another div inside the transparent div, and set it class="remove_filter", this will give you a nice semi opaque look. It works well in IE, FireFox, and Safari, any browsers that don't support it however will just show a solid div, use the proper z-index settings, and everybody will be happy.
    .transparent {
    background-color: #ffffff;
    filter:Alpha(Opacity=55);
    -moz-opacity:0.55;
    }
    .remove_filter {
    position : relative;
    -moz-opacity:0.80;
    filter:Alpha(Opacity=80);
    }

  22. SuNfAiRy
    Member
    Posted 9 years ago #

    thanx for posting the opacity code. I have been toying with how to do it all day. I have an Awsome background and want that to still be a big focus for the site, but would like my blog to still show up and be readable...this is the solution to my issues..
    Also on the post above....where is the code for sarfari? the site mentioned above said it needed this code:
    -khtml -opacity:.5;
    in order to see it.
    Or is that what the remove_filter does?
    Thanx I am still a newbie, that knows a little.

  23. Anonymous
    Unregistered
    Posted 9 years ago #

    -khtml-opacity
    and
    -moz-opacity were only because both didn't have complete implementations of opacity. Moz now does. Maybe KHTML does too?
    .foo {
    -khtml-opacity .5;
    -moz-opacity: .5;
    opacity: .5;
    }
    stacking 'em works well, though.

  24. Anonymous
    Unregistered
    Posted 9 years ago #

    try and avoid using opacity css filters as they will apply them to the children of the container your are putting the filter on
    if you can use png's
    try this bit of code out
    background:url(../images/content_bg_footer.png) no-repeat bottom;
    _background-image:none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale,src='common/images/content_bg_footer.png');
    note you must reference the png from the root onwards for the ie filter as you can see above.
    this doesnt work in IE5+ on the mac. But who cares its a shoddy browser anyway

  25. kcjproductions
    Member
    Posted 7 years ago #

    I agree with avoiding opacity css filters because it will apply to the children of the container. Here's some css code that will work in both IE5-up and Mozilla:

    It is an example of using the IE-only AlphaImageLoader and the "* html" hack to provide cross-browser support for png transparency.

    #alphaImage /* Will not be seen by browsers that don't support css. */
    {
    height: 200px;
    width: 200px;
    background-image: url( aqua.png );
    float: left;
    }

    * html #alphaImage /* Will only be seen by IE */
    {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
    (
    src='aqua.png',sizingMethod='scale'
    );
    }

    #fallbackImage /* This will be seen by browsers that don't support css,
    it is hidden for browsers than can do css. */
    {
    display: none;
    }
    }

    This is not my code but taken from the following URL:
    http://www.nrkn.com/alpha/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags