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

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

確認環境
・Google Chrome
・Windows 10

透明度を指定するサンプル
透明度を指定するコード
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

透明度を指定するコード

上記サンプルのコードです。
1.0が不透明の値で、0.0が透明の値です。

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

opacityプロパティ

opacity : 値

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

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