2022.1.14｜コーディング

CSSで文字、ボタン、ボックス、画像を透過させる方法

CSSで文字、ボタン、ボックス、画像を透過させる方法

文字、ボタン、ボックス、画像を透過させたい場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「opacity」プロパティや「rgba」プロパティを使うことで透明度（透過度）を指定することができます。

今回は、CSSで文字、ボタン、ボックス、画像を透過させる方法を解説します。

本記事の内容

CSSで文字、ボタン、ボックス、画像を透過させる方法

CSSで文字、ボタン、ボックス、画像を透過させる方法は、「opacity」プロパティと「rgba」プロパティの2通りあります。「opacity」プロパティと「rgba」プロパティの2つ違いと設定方法を解説します。

1.「opacity」プロパティを使って設定

「opacity」プロパティは、セレクタすべてに透明度（透過度）を指定します。 セレクタすべてに透明度（透過度）を指定するので、文字が入るボックスの場合、文字も含めて全体が透過します。 「opacity」プロパティの値には0.0～1.0までの数値を指定することができます。 透明度（透過度）を薄くする場合は、数値を低くします。

例
数値設定なし
数値設定なし
.box1 {
  max-width:300px;
  text-align: center;
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: #6cdeff;
}
例
数値設定0.5
数値設定0.5
.box2 {
  max-width:300px;
  text-align: center;
  opacity:0.5;
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: #6cdeff;
}
例
数値設定0.2
数値設定0.2
.box3 {
  max-width:300px;
  text-align: center;
  opacity:0.2;
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: #6cdeff;
}

2.「rgba」プロパティを使って設定

「rgba」プロパティは、「opacity」プロパティと異なり背景のみ透明度（透過度）を指定します。
「rgba」プロパティは、文字色「color」や背景「background」に直接透明度（透過度）を指定します。
「rgba」プロパティの値には0.0～1.0までの数値を指定することができます。
透明度（透過度）を薄くする場合は、数値を低くします。

文字を透過させたい場合は、「color: rgba(255,255,255,0.5);」と指定します。
※0.5の記述が透明度（透過度）の数値を表しています。

例
数値設定なし（文字）
数値設定なし（文字）
.box4 {
  max-width:300px;
  text-align: center;
  color: rgba(255,255,255);
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: #6cdeff;
}
例
数値設定0.5（文字）
数値設定0.5（文字）
.box5 {
  max-width:300px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: #6cdeff;
}
例
数値設定0.2（文字）
数値設定0.2（文字）
.box6 {
  max-width:300px;
  text-align: center;
  color: rgba(255,255,255,0.2);
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: #6cdeff;
}

背景を透過させたい場合は、「background: rgba(108,222,255,0.5);」と指定します。
※0.5の記述が透明度（透過度）の数値を表しています。

例
数値設定なし（背景）
数値設定なし（背景）
.box7 {
  max-width:300px;
  text-align: center;
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: rgba(108,222,255);
}
例
数値設定0.5（背景）
数値設定0.5（背景）
.box8 {
  max-width:300px;
  text-align: center;
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: rgba(108,222,255,0.5);
}
例
数値設定0.2（背景）
数値設定0.2（背景）
.box9 {
  max-width:300px;
  text-align: center;
  margin:0 auto 5%;
  padding:10px;
  border-radius:10px;
  background: rgba(108,222,255,0.2);
}

まとめ

以前は、透過の設定方法と言えば画像で透過をさせる方法しかありませんでしたが、CSSで透過の設定が出来るようになって非常に使い勝手は良いですね。
「opacity」プロパティも「rgba」プロパティも今後使う機会は増えてきますね。どちらの設定方法も覚えておくとよいと思います。

«
»

関連記事