[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);
}