【CSS】カスケード変数(root)のRGBAカラーを半透明に
カスケード変数で、RGBAカラーを設定。
その後、アルファ値だけ変えて、半透明にできないか?
ということで、ChatGPT先生にお知恵を拝借。
:root {
--color: rgba(250, 200, 150, 1); /* rgb(250, 200, 150) も可 */
}
.box {
background-color: rgb(from var(--color) r g b / 0.5);
}
こんな書き方ができるみたいです。
勉強になりますね。
これで決まったカラーを使いまわしつつ、部分的に半透明にする事が可能になりました。
See the Pen root-rgba-color-semi-transparent by Rin5Graphic (@rin5graphic) on CodePen.