Difference between revisions of "CSS GUIDE -MOZ-OPACITY"

From CDOT Wiki
Jump to: navigation, search
(Syntax)
(Usage)
Line 40: Line 40:
 
<IMG style="-moz-opacity:0.6" src="alta.gif" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">
 
<IMG style="-moz-opacity:0.6" src="alta.gif" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">
 
</pre>
 
</pre>
 +
 +
 +
[[Image:Fun stuff.png]]
  
 
== Mozilla Recommended Values ==
 
== Mozilla Recommended Values ==

Revision as of 19:14, 14 December 2006

This document is a work in progress and is subject to change.

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.


Initial Value:1(opaque)
Applies toall elements
Inherited:No

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:

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

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. 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.

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

Usage

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


Fun stuff.png

Mozilla Recommended Values

MDC document on -moz-opacity

Notes

The World Wide Web Consortium (W3C) provides a free online CSS validation service.


Browser Compatibility

  • Internet Explorer
  • Firefox
  • Opera