CSS Opacity

说明|评论

demo demo1 demo2 demo3 demo4 demo5 demo6 demo7 demo8 demo9 demo10 demo11 demo12
源码
<style type="text/css">
#demo1{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
  *filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  opacity:.3;
}
</style>
<span id="demo1" contenteditable>demo1</span>
<style type="text/css">
#demo2{
  -ms-filter:"alpha(opacity=30)";
  *filter:alpha(opacity=30);
  opacity:.3;
  display:inline-block;
}
</style>
<span id="demo2">demo2</span>
<style type="text/css">
#demo3{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  opacity:.3;
  height:2em;
}
</style>
<span id="demo3">demo3</span>
<style type="text/css">
#demo4{
  filter:alpha(opacity=30);
  opacity:.3;
  float:right;
}
</style>
<span id="demo4">demo4</span>
<span 
id="demo5" 
style=' 
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; 
  *filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);  
  opacity:.3; 
  position:absolute;
'>demo5</span>
<span 
id="demo6" 
style=' 
  -ms-filter:"alpha(opacity=30)"; 
  *filter:alpha(opacity=30);  
  opacity:.3; 
  writing-mode:tb-rl;
'>demo6</span>
<span 
  id="demo7" 
  style=' 
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);  
  opacity:.3; 
  zoom:1; 
'>demo7</span>
<span 
id="demo8" 
style=' 
  filter:alpha(opacity=30);  
  opacity:.3; 
  display:block
'>demo8</span>
<!--
YUI.util.Dom.setStyle('demo9','opacity','0.3');
-->
<span id="demo9">demo9</span>
<!--
Protoype:
Element.setStyle('demo10','{opacity:0.3}');
-->
<span id="demo10">demo10</span>
<!--
jQuery:
$('#demo11').css('opacity','0.3');
-->
<span id="demo11">demo11</span>
<!--
setOpacity('demo12','0.8');
setOpacity('demo12','0.3');
setOpacity('demo12','0.5');
-->
<span id="demo12">demo12</span>
hasLayout
YUI
Prototype
jQuery
getOpacity(el)