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>

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像を指定するサンプル(background-image)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 線のグラデーションのサンプル(linear-gradient)
CSS3 円のグラデーションのサンプル(radial-gradient)



△上に戻る