【CSS】opacityで透明度を指定する方法を学ぼう！

シュウ

今回は【CSS】opacityで透明度を指定する方法を学ぼう！
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
opacityの使い方について学びたい方へ
今回は画像や文字を透過させる方法について記事を書いております

上の図のように、opacityは0〜1.0までの数値を指定することにより、透明、不透明の指定ができるようになります。

[記事の内容]

opacityについて

opacityとは、要素の透明度を指定する際に使用します。
書き方は以下のようになります。

要素 {opacity: 数値};

要素に対して数値を指定します。
0に近いほど透明になり、1,0に近いほど不透明になります。

「opacity: 1.0」の場合

「opacity: 1.0」

img { opacity: 1.0;}

画像に対してopacity:1を指定していますが、変化はありません。
「1.0」と指定した場合は、不透明になります。、つまり1.0は100％です。

「opacity: 0.5」の場合

「opacity: 0.5」

img { opacity: 0.5;}

画像に対してopacity:0.5を指定しています。
「0.5」と指定した場合は、50％の透明度になります。

「opacity: 0.1」の場合

「opacity: 0.1」

img { opacity: 0.1;}

画像に対してopacity:0.1を指定しています。
「0.1」と指定した場合は、10％の透明度になります。

「0」と指定した場合は、0%になり完全に透明になります

hover時に画像を透明にさせてみる

opacityは画像をホバー(hover)時に画像をうっすら透明にすることも可能です。

「opacity:」hover場合

a img {
 opacity: 1.0;
 transition: .3s;
}
a:hover img {opacity: 0.5;}

画像に対してホバー(hover)した際にopacity:0.5を指定しています。
ホバーをした際に透明度50%になり、マウスを離した際に100%に戻るようになっております。

「opacity:」hover場合

a img {
 opacity: 0.5;
 transition: .3s;
}
a:hover img {opacity: 1.0;}

今回は、初期値を0.5(50%)の透明度にしており、
画像に対してホバー(hover)した際にopacity:1.0を指定し、100%に戻るようになっております。

画像、文字を透明にさせてみる

ここまでは画像に対してのopacity指定方法でしたが、
この章では、文字に要点をおき解説していきます。

「opacity:」文字に対しての指定方法

ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない
要素の1つになってきますよね。
私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか？

p {
  color: #333;
  border: solid 5px #e8505b;
  background-color: #e8505b;
  padding: 30px;
  box-sizing: border-box;
  opacity: 0.5; /*--opacity指定--*/
}

要素内にopacityを指定した場合は、文字色や背景色、ボーダーの色にも適用されますね。
この指定方法だと、見えにくい、読みにくいなどの問題もあります、次に解決方法を解説いたします。

「rgba」での解決方法

p {
  color: #333;
  border: solid 5px #e8505b;
  background-color: rgba(232,80,91,0.5);
  padding: 30px;
  box-sizing: border-box;
}

今回はbackground-color: rgbaを指定し、
背景色のみ0.5(50%)透明に指定しています。
rgbaの指定方法により、見えにくい、読みにくいなどの問題は解決されます。

CSSプロパティ参考になるかも

background-colorを学び背景色を指定しよう！

基本的な記述方法や透過について解説しております。

注意！
opacityは要素内の子要素すべてに適用されます。
要素の一部分だけ透明度を変えたい場合は、rgbaを使用しましょう！

背景画像を指定する際には

backgroundで背景画像を指定した際にも同じような現象がおこります。
今回は解決方法としてpositionプロパティーとz-indexを使用してみます。

「背景画像」での指定方法

SHU CAFE

<div class="inner">
	<div class="box"><p>SHU CAFE</p></div>
</div>

.inner { /*--省略--*/ }
.box {
    background: url(画像パス) no-repeat;
    background-size: cover;
    position: relative; /*--relativeを追加--*/
    border: solid 10px #995314;
}
 .box:before {
    content: "";
    position: absolute;  /*--absoluteを追加--*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
	background-color: rgba(153,83,20,0.5);
 } 
 p {
	color: #ffffff;
	position: relative;
	z-index: 2;
}