Entry
Can I set the opacity/transparency of an element?
Nov 23rd, 2000 12:26
Martin Honnen,
NN6 and IE5(maybe 4 not sure here) have their own extensions for that as
current css1 and css2 standards only know completely transparent or
colored elements.
With NN6 you have a css property
-moz-opacity
which takes percentage values and is scripted as
.style.MozOpacity
IE has a css property
filter
which allows for different effects, opacity is set with
filter: alpha(opacity=50)
A complete example follows below:
<HTML>
<HEAD>
<TITLE>
opacity
</TITLE>
</HEAD>
<BODY>
<A HREF="javascript: void 0"
ONCLICK="if (document.all)
document.all.aDiv.style.filter = 'alpha(opacity=0)';
else if (document.getElementById)
document.getElementById('aDiv').style.MozOpacity = '0%';
return false;"
>
set opacity to 0%
</A>
|
<A HREF="javascript: void 0"
ONCLICK="if (document.all)
document.all.aDiv.style.filter = 'alpha(opacity=100)';
else if (document.getElementById)
document.getElementById('aDiv').style.MozOpacity = '100%';
return false;"
>
set opacity to 100%
</A>
|
<A HREF="javascript: void 0"
ONCLICK="if (document.all)
document.all.aDiv.style.filter = 'alpha(opacity=50)';
else if (document.getElementById)
document.getElementById('aDiv').style.MozOpacity = '50%';
return false;"
>
set opacity to 50%
</A>
<DIV STYLE="position: absolute;
left: 200px; top: 200px;"
>
Kibology for all.
</DIV>
<DIV ID="aDiv"
STYLE="position: absolute;
left: 200px; top: 200px;
background-color: orange;
width: 200px;
height: 20px;
filter: alpha(opacity=50);
-moz-opacity: 50%;"
>
</DIV>
</BODY>
</HTML>
