PDA

View Full Version : Set transparency / opacity


pauldf
07-04-2011, 10:03 AM
How's things guys

Quick question. I have a template page that is using a css layout and for the .content area I would like to give it a fill colour of grey but then have it at say 50% transparency. I went looking everywhere and people were saying to use the style:"filter... code but I tried everything and I couldn't get it to work. So I was just wondering if anyone knew here how to do it or if it's even possible. Basically this is the code that is there now:


.content {
padding: 10px 0;
width: 780px;
float: left;
background-color: #CCC;

}

And I would just like to have this like I said at 50% transparency. Any taught of ideas would be much appreciated guys.

All the best

*Sorry guys meant to say I'm using CS5

Corrosive
07-04-2011, 11:17 AM
Transparency is one of those things that can be achieved through CSS but you'll need a few different commands for different browsers. The filter thing is IE. Other browsers use CSS3. In all honesty I'd save yourself the bother and create a small square .png image, with a grey colour set to 50% and then repeat as a background image through CSS.

pauldf
07-04-2011, 11:32 AM
Hi Corrosive

Yeah I was looking at all the commands for different browser etc. and I was hoping their would be an easier way but would you believe I never even taught about repeating a small .png square. And that's why it's always good to ask questions :) Thanks a million for your reply I'm gonna go give that a shot now.
All the best.

Corrosive
07-04-2011, 11:57 AM
OK, cool. Let us know how you get on. Bear in mind IE6 doesn't handle png transparency so perhaps offer an alternative grey for users of the worst browser left on the planet... Or ignore them like I do ;)

gentleone
07-04-2011, 12:15 PM
Or you can use rgba for modern browsers and older browsers that don't support rgba just get the plain grey color.

.content {
padding: 10px 0;
width: 780px;
float: left;
background-color: #CCC;
background-color: rgba(179,179,179,.5);
}
http://dowebsitesneedtolookexactlythesameineverybrowser.c om/

domedia
07-04-2011, 03:04 PM
Or you can use rgba for modern browsers and older browsers that don't support rgba just get the plain grey color.
Modern browsers + IE9 supports this. Prime time for implementation 8)

.