partial transparency

[DarkElf]

I want to set the background colour of a div to be partially transparent so that a image behind shows through a bit but not completely (so its still easy to read text inside the div). I am aware that there is an opacity property in CSS 3 but as this isn't yet supported by some of the main browsers I'm loath to use it.I know there must be an alternative (though probably more complicated) solution that is supported by more browsers because I recall seeing the effect applied previously in older browsers.Does anyone know of any good articles on this?

[aspnetguy]

use this

.className{  background: #000;  width: 400px;  height:250px;  opacity: .5;                      /*FireFox*/  filter: alpha(opacity=50);  /*IE*/}

This set the transparency to 50%.

[scott100]

Does anyone know of any good articles on this?

Here's a good one: http://www.mandarindesign.com/opacity.html

[DarkElf]

Thanks guys, I can't believe some of the things they go into in the article, its a fair bit more powerful than I had thought.

[scott100]

its a fair bit more powerful than I had thought.

Especially the section on "Opacity Over Easy", this effect saves you from using javascript rollovers which i have seen in the past which can be slow, just use css, brill

[vchris]

Transparency is nice and all but will not pass validation and I believe it doesn't work in Opera

[aspnetguy]

Transparency is nice and all but will not pass validation and I believe it doesn't work in Opera

<{POST_SNAPBACK}>

Why won't it pass validation??? my transparency code validates.opacity: .5 also works in newer versions of opera

[ThePsion5]

There's actually a way to simulate transparancy fairly easily with CSS 1.0, so it's completely compatible with any browser that supports CSS (Even Internet Explorer, i believe). It's also somewhat limited and not real transparency, sadly. Here's how it works.Align your primary background image as so (with a fixed position at the top-left corner) :

body {background: black url(bg.jpg) 0 0 no-repeat fixed;}

Then, modify the original background file by whitewashing it, changing the color balance, or any number of things and align is the same way you did the original background

div#wrapper{background: #468 url(bg_different.jpg) 0 0 no-repeat fixed;}

The effect is that the #wrapper div appears to be partially transparant. Here's an example of this nifty little trick Example

[Jonas]

There's actually a way to simulate transparancy fairly easily with CSS 1.0, so it's completely compatible with any browser that supports CSS (Even Internet Explorer, i believe). It's also somewhat limited and not real transparency, sadly. Here's how it works.Align your primary background image as so (with a fixed position at the top-left corner) :

body {background: black url(bg.jpg) 0 0 no-repeat fixed;}

Then, modify the original background file by whitewashing it, changing the color balance, or any number of things and align is the same way you did the original background

div#wrapper{background: #468 url(bg_different.jpg) 0 0 no-repeat fixed;}

The effect is that the #wrapper div appears to be partially transparant. Here's an example of this nifty little trick  Example

<{POST_SNAPBACK}>

Cool. So all the images are in fact positioned in the upper left corner, but only parts show within the divs?

[ThePsion5]

Exactly, mi amigo. Therefore the only part of the image you see matches the background image perfectly, but since the image itself is modified it looks like it's being viewed through the div.

[vchris]

Why won't it pass validation??? my transparency code validates.opacity: .5 also works in newer versions of opera

<{POST_SNAPBACK}>

Well I had a page with transparency on a div and it gave me warnings.

[aspnetguy]

Well I had a page with transparency on a div and it gave me warnings.

<{POST_SNAPBACK}>

A document that has warnings still passes validation. It is just a reminder that depending on browser settings the line may not function as intended.

[vchris]

I always program to not have any warnings or errors. Just seems more professionals when it's perfect.I guess in some cases you can't always do that.

[Jonas]

Things I Will NOT be working on: asp.net, because it's dumb. I hate asp.net.

How can you say asp.net is dumb? You can certainly hate microsoft, but I can't understand how you can call the technology asp.net dumb.

[aspnetguy]

Things I Will NOT be working on: asp.net, because it's dumb. I hate asp.net.

How can you say asp.net is dumb? You can certainly hate microsoft, but I can't understand how you can call the technology asp.net dumb.

<{POST_SNAPBACK}>

Hey, you changed your sig...I am even more hurt :)Seriously, have you tried it? It is a very powerful language. Given the choice I would always pick ASP.Net for the following reasons.1. It is compiled so it runs faster.2. It is compiled so you can hide your source code and still distribute your applications.3. It has the full power of VB.Net or C# because it is not a scripting language like ASP.4. It can easily interact with other popular MS products such as MS Office products.5. Crystal Reports are integrated with ASP.Net.6. Creating custom controls and components is amazingly easy.7. Despite what some may say everything you need to use for development is FREE, IDE, Framework, Database....I could go on but I won't

[DarkElf]

I've been having a lot of fun with this opacity stuff, however I've just noticed a problem on my pages and can't work out how to fix it.Basically I've got a div which contains text and images which has opacity of 75% so that the background image is partially visible through the div. But it turns out that not only is the div itself transparent, but all of its contents are as well. This is barely noticable with black text, in fact until now I hadn't spotted it at all, but once I started adding images its quite obvious and isn't the desired effect. What I want to do is make the background colour of the div only transparent, the contents should preserve their full opacity.Is this possible? I tried changing the opacity values of the images but that only changes their opacity in relation to the div, not the background image!

[vchris]

Yes it is possible! I've done it and there is a trick to making the content 100% opacity.Found it! Opacity on Background with Fully Opaque Text

[DarkElf]

Forgive me if I'm wrong, but that looks like they are just shifting the contents of a paragraph not included in the div up the page using position relative so that it appears to be inside the div?It's a nice idea but doesn't quite work for my problem as my div is not of a fixed size.

[vchris]

Well I did it once but I didn't do it this way all I did (I think) is add another div within that div and add something on it... sry don't remember much and deleted the project...try google worst case if noone here knows

[aspnetguy]

This is the only cross browser solution I could find although it is just repositioning an outside element.

<div style="width:200px;height:159px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(http://www.mandarindesign.com/images/monday.jpg)"></div><p style="width:200px;text-align:justify;position:relative;top:-159px;color:black;">This opacity background with fully opaque text works in Mozilla and IE.</p>

This solution only works in IEhttp://www.domedia.org/oveklykken/css-transparency.php

[vchris]

I got this transparency effect working in IE perfectly, in Firefox I get the transparency on the div and also the text in it which I don't want. I wasn't able to test in Opera to see if it worked fine.Is there a fix for my Firefox issue? Anyone found a way to do this without overlaying the text on the div?