Semi-Transparent backgrounds

newt
(@newt)

20 years, 1 month ago

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)

1 2 →

stevarino
(@stevarino)

20 years, 1 month 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.

Thread Starter newt
(@newt)

20 years, 1 month 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.

stevarino
(@stevarino)

20 years, 1 month 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. 😀

Thread Starter newt
(@newt)

20 years, 1 month 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.

stevarino
(@stevarino)

20 years, 1 month 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).

Anonymous

20 years, 1 month ago

No chance this works in NN4 I suppose? 🙂

Anonymous

20 years, 1 month ago

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

NuclearMoose
(@nuclearmoose)

20 years, 1 month 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.

Thread Starter newt
(@newt)

20 years, 1 month ago

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

willm
(@willm)

20 years, 1 month 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>

stevarino
(@stevarino)

20 years, 1 month 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>

bestfoot
(@bestfoot)

20 years, 1 month 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.

Anonymous

20 years, 1 month ago

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

Anonymous

20 years, 1 month ago

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

Amy
(@beachgerl)

20 years ago

Awesome! I tried the tutorial and worked beautifully.