HTML要素の透明度の設定

1687 ワード

W 3 Cの標準属性はopacityであり、現代ブラウザではサポートされているが、IE 6/7/8ではサポートされていない.Firefox、Safari、Opera、Chromeでのテストはopacityをサポートしています.divの透明度を40%に設定します.
<!DOCTYPE HTML>
<html>
  <head>
    <title>set div opacity</title> 
	<style>
		.wrapper {
			border:solid 1px gray;
			opacity:0.4;
		}
	</style>
  </head>
  <body>
    <div class="wrapper">
		set div opacity
    </div>				
  </body>
</html>

注意:firefox 3.5次のバージョンでは-moz-opacityプロパティを使用します. 
IE 6/7/8は複雑な1、IE 4-IE 7はfilter:alpha(opacity=xx)を使用しますが、同時にhasLayoutを持つようにします.
<!DOCTYPE HTML">
<html>
  <head>
    <title>set div opacity</title>
	<style>
		.wrapper {
			border:solid 1px gray;
			background-color:green;
			filter: alpha(opacity=40);
			zoom:1;
		}
	</style>
  </head>

  <body>
    <div class="wrapper">
		set div opacity
    </div>				
  </body>
</html>

2、IE 8では、上のfilter:alpha(opacity=10)を使用してもよく、zoomを設定せずに要素にlayoutを持たせることができます.同時にIE 8は-ms-filter属性を使用することができる.-ms-filter:"alpha(opacity=10)";/*IE 8*/関連:
https://developer.mozilla.org/En/CSS:-moz-opacity
フィルタを使用して透明を設定するとIE 6/7/8/9に異常が発生する