1
edit
Changes
→Fun with -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>ApplicabilityInitial Value:</b></td><td>The background-repeat property can be used for all CSS elements.1(opaque)</td>
</tr>
<tr>
<td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]Applies to</b></td><td>Visualall elements</td>
</tr>
<tr>
== Syntax ==
<pre>
</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>
*For CSS opacity to work in the browser it must have some placement specified. Mozilla recommends that we use float:left; and position:relative; to work in Mozilla Firefox. 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="v90.gif" width="50" height="50"></span>
</pre>
==Fun with -moz-opacity==
To make your page more attractive, you can do something like this:
[[Image:Fun stuff.png]]
<pre>
<div style="color:black;width:150px;background:white;filter:alpha(opacity=50);-moz-opacity:.50;
opacity:.50;float:right;margin-top:10px;margin-bottom:10px;margin-left:10px;
font-family:Verdana, Arial, Helvetica,Georgia;font-size: 28px;line-height:26px; text-align: right;">
...this will look like some of the
<b>pullquotes or subtitles we see</b>
in
<span style="width:150px;padding-bottom:10px;float:right;text-align:left;color:black;background:white;
filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">magazine<b>layout...</b></span>
</div>
</pre>
== Mozilla Recommended Values ==
[http://developer.mozilla.org/en/docs/CSS:background-repeat moz-opacity MDC document on background-repeatmoz-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 ==