【CSS】opacityで画像などを透過させる方法

cssのopacityで要素を透過

今回はCSSのopacityプロパティを使って、画像などの様々な要素を透過させる方法を解説します。

CSSのopacityの書き方

CSSではopacityというプロパティで透明度(透過度)を指定することができます。書き方は以下のようになります。

◯◯ { opacity: 透過度; }

◯◯はセレクタで、透明にしたいものを指定します。
透過度には、0〜1の範囲で値を入れます。0だと完全透明、0.5だと50%透明、1だと不透明、という具合です。例を見てみましょう。

opacity: 1(=指定しなかった場合)

CSS
img {
	opacity: 1;
}

サルワカくんの顔(通常)

画像(img)に対してopacity:1を指定しています。1.0だと完全不透明です。つまり、指定しても何も変わりません。

opacity: 0.5

CSS
img {
	opacity: 0.5;
}

サルワカくんの顔(通常)

opacity:0.5だと透明度は50%です。

opacity: 0.1

CSS
img {
	opacity: 0.1;
}

サルワカくんの顔(通常)

opacity:0.1だと不透明度が10%しかありません。つまり消えかけです。0にすると完全透明になり、全く見えなくなります。

ブラウザ対応状況:ベンダープレフィックスは必要?

下の画像は、各ブラウザの対応状況です(2017年7月時点)。

opacityのcaniuse

IEも9以降〜で対応しています。ベンダープレフィックスをつける必要は基本的に無いでしょう。

画像hover時に透過させる方法

サルワカくんの顔(通常)
サルワカくん

ここからはopacityの使用例をいくつか紹介していきます。

opacity画像ホバー時(カーソルを上に重ねたとき)に画像をうっすらと透明にさせるには以下のように書きます。

HTML
<p class="example">
	<img src="/face.png">
</p>
CSS
/*ゆっくり透明に*/
.example img {
	transition: .3s;
}

/*ホバー時に透明度50%*/
.example img:hover {
	opacity: 0.5;
}

画像をホバー時に透過させる例

クラス名がexample内のimgをホバー時に50%透過させる、という指定です。このようなセレクタの書き方がよく分からないという方はこちらの記事をどうぞ。

transition: .3sはホバー時の変化を滑らかにするためのものです(0.3s秒かけて変化)。無くても問題なく透明になります。

逆にカーソルを当てると浮かび上がるようにするには

さきほどの例とは逆に、「カーソルを当てると、画像が浮かび上がるようにする」には以下のように書けばOKです。

CSS
.example img {
	opacity: 0.1;/*通常は半透明*/
	transition: .3s;
}

.example img:hover {
	opacity: 1;/*ホバーで不透明*/
}

カーソルを当てると不透明に

はじめにopacity:0.1としておいて、ホバー時にopacity:1にしているわけですね。

文字もopacityで透過できる?

できます。指定の仕方も同じです。

HTML
<p class="opa">こんにちは</p>
CSS
.opa {
	opacity: .3;
}

こんにちは

文字の不透明度が30%となっているのが分かるかと思います。とはいえ、opacityを使わなくても、文字色(color)をrgbaで指定したり、transparentと指定したりすることで透明にすることができます。

CSS
.opa {
	color: rgba(0,0,0,0.3);
}

こんにちは

rgba(◯,◯,◯,◯)のいちばんの◯でopacityと同じように透過度を指定するわけですね。rbgaの書き方について詳しく知りたい方はHTMLクイックリファレンスを見てみると良いかと思います。

サルワカくんの顔(喜)
サルワカくん

ちなみにcolor: transparent;と指定すると、文字色が完全透明になります。またボックスの背景色なんかもbackground-color: transparent;とすることで、透明にできます。

その他の要素にもopacityは使える

文字や画像だけでなく、divやspanなど様々な要素に対してopacityは使うことができます。使う機会はそう多くないかもしれませんが、押さえておくと表現の幅が広がるのではないかと思います。

サルワカ