CSSのopacityで画像や文字を透明にする方法と活用法を徹底解説

画像やラベルを少し透明にできれば、デザインの幅が広がりそうです。

画像や文字をちょっとだけ透明にしたい！というときに使うopacityというプロパティがあります。

今回は、そんなopacityについて解説していきます！

opacityの基本的な部分について3つの活用例を出しつつ解説していくので、CSS初心者でも理解しやすいと思います！

前回のステップ

今回は、CSSで要素に影を付けるためのbox-shadowというプロパティについて主に解説しつつ、透明画像に影を付けるときのfilter: drop-shadowや文字に影を付ける方法についても解説していきます。CSSの影の付け方が良く分からない。という人に向けて要素に影を付けるための基本を全て書いていきます。

1.opacityの使い方

opacityの使い方は簡単です。

CSS

○○{
  opacity: ...;
}

これだけ。

0～1の数字を入れることにより、不透明度を表します。

0が透明で、1が不透明です。

以上のように、0から1の間の値を指定することで、0.5なら50%、0.7なら70%・・・というように細かく不透明度を決めることができます。

2.opacityの使用例

使用例をいくつか見ていきましょう！

opacityの使用例

画像の下側に説明を入れる
画像や文字などをすこし薄くする
ホバーしたときに判別がつくようにする

画像の下側に説明を入れる

このように、画像の下に説明を入れることができます。

このような場合は、背景の黒色だけを透明にすべきです。
これについては後述します。

ひこ　opacityを指定した要素は、背景色も文字も含めて透明になると覚えてもらえればと思います。

HTML

<div class="img-wrap">
  <img src="画像のURL" alt="ラベル付きの画像です" width="700" height="467" />
  <div class="description">伏見稲荷大社で撮った写真。人がいないところを狙って撮るのは難しかった・・・。<br>個人的にお気に入りの一枚です。</div>
</div>

CSS

.img-wrap{
  position: relative;
}

.description{
  opacity: 0.6;/*透明度を設定*/
  box-sizing: border-box;
  color: #fff;
  background: #000;
  width: 700px;
  height: 100px;
  padding: 1em;
  position: absolute;
  bottom: 5px;
}

これを利用して、アイキャッチ画像の左上にラベルを付けているのはよく見かけます。

opacityで画像や文字を薄くする

先ほどのように、要素の背景色と文字の色をopacityで透明にすることもできます。

しかしこれに関しては色をrgba形式で指定すればいいだけなので、opacityを使う必要はありません。

ですが、画像を透明にしようと思ったらopacityを使う必要が出てきます。

CSS

img{
  opacity: 0.5;
}

周りに比べてちょっと目立ちすぎる・・・なんて時に0.9とかにすることで主張を抑えたりもできます。

opacityでホバーしたときに判別がつくようにしたい

opacityは特にホバーしたときに使われることが多いです。

書き方は後述しますが、ホバーしたときにちょっと薄くなることでユーザは「あ、ここはクリックできるボタンだ！」と認識することができます。

マウスカーソルがホバーしたときに、少し色が薄く（透明に）なることで、「ここはクリックできる場所だ」と思わせることができます。

3.ホバーしたときに透明にする方法

:hoverを使用することで、ホバーしたときのスタイルを決めることができます。

ホバーについては、次のステップで詳しく解説をします。

CSSのhover(ホバー)の使い方とサンプルまとめ

今回は、コードを参考程度に見てもらえればと思います。
先ほど紹介した緑色のボタンのHTMLとCSSは以下のようになります。

HTML

<div class="btn">透明になれば押せる！と考えられる</div>

CSS

.btn{/*ボタンの形とか色とか*/
  display: inline-block;
  background: #4caf50;
  border-radius: 5px;
  padding: 1em 2em;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;/*0.3秒かけて薄くする*/
}

.btn:hover{/*ホバーしたとき*/
  opacity: 0.7;/*不透明度を70%に*/
  cursor: pointer;/*マウスカードルを手のアイコンに*/
}

ホバーのときにopacityを決めるだけでも、クリックしてほしいボタンならクリック率が上がるので、もしやっていない場所があれば何かしらの工夫をしたいところです。