Jump to content

partial transparency


DarkElf
 Share

Recommended Posts

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?

Link to comment
Share on other sites

use this

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

This set the transparency to 50%.

Link to comment
Share on other sites

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 :)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Cool. So all the images are in fact positioned in the upper left corner, but only parts show within the divs?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

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
Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...