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

記事内に商品プロモーションが含まれる場合があります

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

CSSのopacityの書き方

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

◯◯ {
	opacity: 透過度;
}

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

CSS

img {
	opacity: 1;
}

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

CSS

img {
	opacity: 0.5;
}

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

CSS

img {
	opacity: 0.1;
}

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

下の画像は、各ブラウザの対応状況です（2018年1月時点）。

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

ここからは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%透過させる、という指定です。このようなセレクタの書き方がよく分からないという方はこちらの記事をどうぞ。

CSSのセレクタとは？覚えておきたい25種類と書き方

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

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

CSS

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

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

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

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

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;とすることで、透明にできます。

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