CSS3 透明度を指定するサンプル(opacity) |

CSS3の透明度を指定するサンプルです。
opacityプロパティを使用します。

サンプル

opacityのサンプルです。
opacityの値を1.0から0.2ずつ下げています。
サンプルとしてopacity 0.0もあるのですが、透明のため見えなくなっています。

opacity 1.0

opacity 0.8

opacity 0.6

opacity 0.4

opacity 0.2

opacity 0.0

opacity プロパティ

opacity : 値

値	説明
数値	指定した数値で設定します。
値を継承しない

初期値は1.0です。
0.0から1.0の数値を指定します。
0.0が透明の値で、1.0が不透明の値です。
透明になるほど背景が透けて見えるようになります。
以下はMDNの opacityプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/opacity

コード

上記サンプルのコードです。

<style>
#test1{
	opacity:1.0;
}
#test2{
	opacity:0.8;
}
#test3{
	opacity:0.6;
}
#test4{
	opacity:0.4;
}
#test5{
	opacity:0.2;
}
#test6{
	opacity:0.0;
}
.c1 div{width:50%;border:1px solid #000;background:#E0FFFF;
height:50px;margin-bottom:20px;text-align:center;}
</style>
<body >
<div class="c1">
	<div id="test1">opacity 1.0</div>
	<div id="test2">opacity 0.8</div>
	<div id="test3">opacity 0.6</div>
	<div id="test4">opacity 0.4</div>
	<div id="test5">opacity 0.2</div>
	<div id="test6">opacity 0.0</div>
</div>
</body>