Let's say I want to set the background of an object to transparent...I would do this:
background:transparent
But...is there any way to set the level of transparency...or opacity?
Thanx.There indeed is, however, both of the currently available methods are not yet standardized, however, one of them eventually will be in CSS3 so I'd say it's quite safe to use. The other, however, will not because it is non-standard and must be used to get it working in a certain substandard HTML renderer (read: IE).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
#transparent {
filter: alpha(opacity=50); /* ie */
height: 450px;
width: 650px;
border: solid #000 1px;
margin: 0 auto;
}
html>body #transparent {
-moz-opacity: 0.50; /* moz */
}
/*]]>*/
</style>
</head>
<body>
<div id="transparent"></div>
</body>
</html>The first definition uses proprietary thus invalid CSS to allow the transparency to work within IE via its non-standard "filters". The next one, however, allows it to work in Mozilla using somewhat correct notation. It will not validate as of now simply because CSS3 isn't really implemented just yet and moreover, note that the vendor-specific prefix (i.e., -moz-) which is correct according to the W3C.
To see the above code actually work, simply apply a background-image or perhaps a background-color and carefully note how you can somewhat see through it hence semi-transparency or more correctly, opacity. To make it less or more transparent, simply modify the values as predefined above as 50.By the way, that syntax you gave for mozilla will only work in Netscrape. Mozilla and Safari both use opacity: .0
Also, IE filters only function if width property is set. He might omit it if he doesn't know that.
I would say that since it's not a standard yet, there can't be an invalid syntax. The only 2 browsers using the same syntax for the property are Moz/Safari. Opera doesn't support it at all.Originally posted by DUNSEL
By the way, that syntax you gave for mozilla will only work in Netscrape. Mozilla and Safari both use opacity: .0Take note of the timestamp on my previous post. At that time Mozilla 1.7b hadn't yet been released thus the vendor-specific prefix and non-standard property had to be used. Mozilla 1.7b was the first Mozilla release to support CSS3's opacity. Further, Mozilla 1.7b (and above I would imagine) still support the vendor-specific, non-standard notation.
background:transparent
But...is there any way to set the level of transparency...or opacity?
Thanx.There indeed is, however, both of the currently available methods are not yet standardized, however, one of them eventually will be in CSS3 so I'd say it's quite safe to use. The other, however, will not because it is non-standard and must be used to get it working in a certain substandard HTML renderer (read: IE).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
#transparent {
filter: alpha(opacity=50); /* ie */
height: 450px;
width: 650px;
border: solid #000 1px;
margin: 0 auto;
}
html>body #transparent {
-moz-opacity: 0.50; /* moz */
}
/*]]>*/
</style>
</head>
<body>
<div id="transparent"></div>
</body>
</html>The first definition uses proprietary thus invalid CSS to allow the transparency to work within IE via its non-standard "filters". The next one, however, allows it to work in Mozilla using somewhat correct notation. It will not validate as of now simply because CSS3 isn't really implemented just yet and moreover, note that the vendor-specific prefix (i.e., -moz-) which is correct according to the W3C.
To see the above code actually work, simply apply a background-image or perhaps a background-color and carefully note how you can somewhat see through it hence semi-transparency or more correctly, opacity. To make it less or more transparent, simply modify the values as predefined above as 50.By the way, that syntax you gave for mozilla will only work in Netscrape. Mozilla and Safari both use opacity: .0
Also, IE filters only function if width property is set. He might omit it if he doesn't know that.
I would say that since it's not a standard yet, there can't be an invalid syntax. The only 2 browsers using the same syntax for the property are Moz/Safari. Opera doesn't support it at all.Originally posted by DUNSEL
By the way, that syntax you gave for mozilla will only work in Netscrape. Mozilla and Safari both use opacity: .0Take note of the timestamp on my previous post. At that time Mozilla 1.7b hadn't yet been released thus the vendor-specific prefix and non-standard property had to be used. Mozilla 1.7b was the first Mozilla release to support CSS3's opacity. Further, Mozilla 1.7b (and above I would imagine) still support the vendor-specific, non-standard notation.