[CSS] 文字を透過せずに背景だけ透過する方法
.cls {
background-color: rgba (200, 25, 25, 0.8);
}
みたいにすると、opacity: 0.8の透明度で背景のみ透過できるが、別のやり方もある。
.cls {
background-color: #c8151510;
}
普通のHEX6桁のカラーコードに、2桁付け足してあげる。
00が透過率100%で、値が大きくなるほど透過率が下がっていく。
ただし、この記述はIE、Edgeで使えないという衝撃の事実を今日知ってしまった・・・(◞‸◟)
大人しくrgbaで書きましょう・・・。
ちなみに、SASS/SCSSを使ってるとこんな書き方もできる(自動で変換してくれるため)
.cls {
background-color: rgba (#123456, 0.8);
}