Semi-Transparent backgrounds

  • I don’t know if this has already been posted but I was pretty stoked when I figured this out. If you have a background image for your body background and you want a box or column or whatever to have a background color but be semi transparent you can do this in your CSS by putting in the following entry in the div for that section:

    filter:alpha(opacity=80);-moz-opacity:0.8;

    That will set the background color to be have an opacity of 80 so you will get a bit of color and some of the background. I’m sure this has a practical application but I thought it was cool and figured I’d share it. This doesn’t however, work in IE and I’m not sure how to make it work. If anyone knows how to make this work across the board please let me know!

Viewing 15 replies - 1 through 15 (of 25 total)

  • 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.

    Thread Starter newt

    (@newt)

    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.

    Ahh, here we go: https://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. ??

    Thread Starter newt

    (@newt)

    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.

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

    No chance this works in NN4 I suppose? ??

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

    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.

    Thread Starter newt

    (@newt)

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

    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>

    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>

    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.

    Already made and freely offered translucent backgrounds <https://www.wannabegirl.org/translucent/&gt;

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

    Awesome! I tried the tutorial and worked beautifully.

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Semi-Transparent backgrounds’ is closed to new replies.

Tags