CSSでopacityを子要素に継承させたくない場合の対処法!

CSSでopacityプロパティを子要素に継承させたくない場合の対処法をサンプルコード付きで解説します。子要素に継承させたくない場合はrgbaプロパティを指定すると子要素に継承することなく解除することができ、透過することが出来ます。

コンテンツ [表示]

  1. 1CSSでopacityを子要素に継承させたくない
  2. 2CSSでopacityを子要素に継承させたくない場合の対処法
  3. 2.1RGBAとは?

CSSでopacityを子要素に継承させたくない

下記のサンプルコードのように、CSSで背景のみにopacityプロパティを指定して透過させたいけどその上に配置する子要素の文字まで透過してしまい、文字は透過して欲しくない場面があります。

この記事ではCSSでopacityプロパティを子要素に継承させない場合の対処法を解説します。

 

CSSでopacityを子要素に継承させたくない場合の対処法

background: rgba

CSSでopacityプロパティで子要素に継承させない場合にはbackground: rgbaを指定すると子要素に継承することなく解除でき、背景のみ半透明にすることが出来ます。

opacityプロパティでは選択した要素全体に対して適用されるので、その子要素にopacityプロパティを指定しても選択した要素全体に対しての適用なので解除できません。

そこでrgbaを使う事によって透明度を選択し子要素に継承することなく解除でき、背景のみを半透明にすることができるようになります。

下記のサンプルコードを参考にして下さい。

RGBAとは?

RGBAとは、red・green・blue・alphaの頭文字から取っており、alphaは色の透明度を0(完全に透明)~1(完全に不透明)を選択することができます。

例えば下記のサンプルコードのように
background-color: rgba(255, 255, 255,1)だと不透明
background-color: rgba(255, 255, 255,0.5 )だと半透明
background-color: rgba(255, 255, 255, 0.1)だと薄い透明
background-color: rgba(255, 255, 255, 0)だと無
になるので是非参考にして下さい。

.cleanness {
  background-color: rgba(255,255,255, 1);
}

.translucent {
  background-color: rgba(255,255,255, 0.5);
}

.onionskin {
  background-color: rgba(255,255,255, 0.2);
}

.nothing {
  background-color: rgba(255,255,255, 0);
}
あわせて読みたい
CSSの色の指定方法をサンプルコード付き解説!のイメージ
CSSの色の指定方法をサンプルコード付き解説!
CSSの色の指定方法は「キーワード」「カラーコード」「RGB」「HSL」など複数あります。それぞれの色の指定の仕方についてサンプルコード付きで解説します。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。