
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;
参考
https://www.digitalocean.com/community/tutorials/css-hex-code-colors-alpha-values
https://caniuse.com/css-rrggbbaa