Computer Science Canada

CSS Transparency
Author:  Azzy [ Fri Mar 24, 2006 9:23 pm ]
Post subject:  CSS Transparency
I'm making my own site right now and I'm using css (obviously as it's in the title). I have a table and what I want to do is add a background color and make it tansparent, but when I used one from another site, it made the text transparent as well. I was wondering how I could make the background transparent but not the text.

This is the code I got off of some site:
code:
td {
        background-color: #3399FF;
        filter:alpha(opacity=25);
        -moz-opacity:.25;
        opacity:.25;
}
Author:  rdrake [ Fri Mar 24, 2006 9:55 pm ]
Post subject: 
You could try specifying the colour of the font afterwards.
code:
td {
color:  #ffffff;
}
That should do it.
Author:  md [ Fri Mar 24, 2006 9:58 pm ]
Post subject: 
CSS does not support transparency like that. MS extentions (the filter) do, but you shouldn't use proprietary extensions. Not sure what the moz bit it but it seems like another proprietary extension.
Author:  Gyonka [ Sun Apr 24, 2011 4:06 pm ]
Post subject:  Re: CSS Transparency
since you are using -moz-opacity, you should know that this will only work in firefox, use -webkit-opacity as well, for webkit browsers like safari and chrome. Since this is not supported in IE it will not work there. (you are using css3)
Author:  yoursecretninja [ Mon Apr 25, 2011 3:00 pm ]
Post subject:  RE:CSS Transparency
If you don't care about legacy browser support, CSS3 does have a means for doing exactly what you want.

#myElement {
background-color: rgba(0, 0, 0, 0.5);
}

CSS3 accepts RGBA (where A is for alpha) color values. This will render a black background that is 50% opaque. Nothing on top of the background (such as text) will be effected.

If you link modernizr (http://www.modernizr.com/) into your project, you can easily provide a regular black background to browsers that don't support RGBA yet like this:

.no-rgba #myElement {
background-color: #000
}

If you are really particular about everyone seeing the transparency instead of setting the background color you can set the background image to an image of the background color with opacity reduced. This will work in all browsers except ie6 as that particular browser didn't support transparency in PNG images. There is a javascript fix available for that. I believe the script is called belated PNG. You can find it easy enough through google.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy