Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 CSS Transparency
Index -> Graphics and Design, Web Design -> (X)HTML Help
View previous topic Printable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
Azzy




PostPosted: 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;
}
Sponsor
Sponsor
Sponsor
sponsor
rdrake




PostPosted: Fri Mar 24, 2006 9:55 pm   Post subject: (No subject)

You could try specifying the colour of the font afterwards.
code:
td {
color:  #ffffff;
}
That should do it.
md




PostPosted: Fri Mar 24, 2006 9:58 pm   Post subject: (No 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.
Gyonka




PostPosted: 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)
yoursecretninja




PostPosted: 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.
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> (X)HTML Help
View previous topic Tell A FriendPrintable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 5 Posts ]
Jump to:   


Style:  
Search: