2021.04.27

CSSのHEX値で透明度を指定する

最近使うようになった小ネタ。
IEでは当然使えません。

RGBA指定が面倒

color: rgba(0, 0, 0, 0.5);

黒とか白なら楽ですが、複雑な色になるとPhotoshopからコピペも面倒なので、最近はHEX値でやるようになりました?

color: #00000050;
-> rgba(0,0,0,0.5)と同じ

color: #00050;
-> エラーで認識しない

最後の2桁が透明度（0-100）です。
ショートコードだとエラーになります。

Sassの時はこんな感じで使ってます。

$black : #000000;

color: #{$black}50;
-> color: #00000050;