View source for CSS GUIDE -MOZ-OPACITY

<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== Summary ==
*Firefox allows you to use coding to manipulate the opacity of an image.
*"Opacity" refers to transparency; the lesser the opacity of an image, the more transparent it is.


<table border="0">
<tr>
<td><b>Initial Value:</b></td><td>1(opaque)</td>
</tr>
<tr>
<td><b>Applies  to</b></td><td>all elements</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
</table>

== Syntax ==
Opacity:1.0 shows you all of the image; Without any filters applied the opacity of an image is 1.0 (fully opaque).

We use CSS to define the initial degree of opacity in Firefox:

<pre>
<IMG style="-moz-opacity:0.5" src="test.gif">
</pre>

Valid range of values for -moz.opacity is from 0 to 1, where lesser equates to more transparency.

For CSS opacity to work in the browser it must have some placement specified. We used float:left; and that worked. Now we are trying position:relative; and that works too, but only in Mozilla Firefox. The float:left CSS style works in both Internet Explorer and Mozilla Firefox. Surely the explanation from W3C makes sense but basically this was trial and error, mostly error to get the transparency opacity to apply to text. The opacity code for simply displaying an image is more straightforward.

<pre>
<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"><img src="http://www.mandarindesign.com/images/v90.gif" width="50" height="50"></span>
</pre>

== Usage ==

*Quick opacity change onMouseover:
<pre>
<IMG style="-moz-opacity:0.6" src="alta.gif" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">
</pre>

== Mozilla Recommended Values ==
[http://developer.mozilla.org/en/docs/CSS:-moz-opacity MDC document on -moz-opacity]

== Notes ==
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].



== Browser Compatibility ==
* Internet Explorer
* Firefox
* Opera