HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用54. 要素の透明度の指定(opacity)

      2019/02/08   hatano

opacityプロパティ(オパシティ)

要素に対して透明度の指定ができます。CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer9以上から対応

opacityプロパティの各ブラウザの対応状況
Can I use -opacity-

値は0〜1の範囲で指定します。
0.0が透明、1.0が不透明となり中間の透明度は小数点で指定します。
例えば、0.1の場合は透明度10%。0.8の場合は透明度80%となります。


.box{
	/* 透明度10% */
	opacity: 0.1;
}

注意点として、透明度は指定した要素だけでなく、その要素の子孫要素にも透明度が適用される点です。
下記のコードでは、透明度を指定したdivタグと子要素のpタグとテキストにも透明度が適用されることがわかります。
コードで使用した画像は、下記からダウンロードできます。

opacity_bg.zip


<div class="wrap">
	<div class="box">
		<p>テキスト</p>
	</div>
</div>


.wrap{
	width: 600px;
	height: 600px;
	padding-top: 150px;
	background-image: url(../image/bg.jpg);
}
.box{
	/* 50%透明 */
	opacity: 0.5;
	width: 300px;
	height: 300px;
	line-height: 300px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 50px;
}
.box p{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: #000;
	color: #fff;
}

opacityで透過

opacityの使い方の例として、a要素hover時に透明度を指定する方法です。
hover時のbacground-colorを指定するのは、それほど難しくありませんが、背景画像やグラーデーションの場合、hover時の画像を用意したり、グラーデーションの設定をする必要があります。
opacityであれば透明度の指定だけなので、hover時の指定が簡単になります。


<div class="btn"><a href="#">ボタン</a></div>


.btn{
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.btn a{
	display: block;
	height: 60px;
	line-height: 60px;
	border-radius: 10px;
	background-color: #333;
	background-image: -webkit-linear-gradient(#888, #333);
	background-image: linear-gradient(#888, #333);
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	color: #fff;
}
.btn a:hover{
	opacity: 0.9;
}

opacityのボタンの通常時

opacityのボタン(hover時)

まとめ

  • opacityは、要素の透明度の指定
  • 値は、0.0(透明)〜1.0(不透明)の間で指定する
  • opacityを指定した要素だけでなく、要素内も透明度が適用される