opacityが子要素まで継承しちゃう場合の対応

概要

背景色を半透明にするためにCSSでopacityを設定した時に子要素の文字まで適用されてしまうのを修正したい場合はbackground: rgbaを指定すればよかった。

やったこと

修正前のコード

div.content {
opacity: 0.5; <= ここ
background-color: #fff; <= ここ
width: 800px;
margin: 0px auto;
padding: 0px 20px 40px;
font-family: 'Quicksand', 'Noto Sans Japanese';
position: relative;
top: 20px;
}


こんな感じで透け感でちゃう。

そして、修正後のコード

div.content {
background-color: rgba(255, 255, 255, 0.5); <= ここ
width: 800px;
margin: 0px auto;
padding: 0px 20px 40px;
font-family: 'Quicksand', 'Noto Sans Japanese';
position: relative;
top: 20px;
}


ちょっと文字色などはそれぞれの要素で修正してますが、こんな感じではっきり読めるようになりました。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください