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