0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

変数化した色を半透明にしたい|rgb()関数内で色変数を使う

Last updated at Posted at 2024-08-27

変数化した色を rbg() 関数で使用して半透明にしたい

変数化した色を半透明にしたいことがある
opacityで調整すると要素全体が半透明になるため、色のみを半透明にしたい
しかし、変数化した16進表記の色はそのままだとrgb()関数内で使用できない

:root {
    --main-color: #ff0000;
}

以下だと上手くいかない

element {
    /*これはエラーになる*/
    background-color: rgb(var(--main-color) / 0.5);
}

10進表記(255 0 0)の変数を別途用意すれば解決するが、それは野暮ったくて嫌だ

解決策

相対値構文を使用することで解決できる

element {
    background-color: rgb(from <16進表記の色> r g b / 0.5)
}
element {
    background-color: rgb(from var(--main-color) r g b / 0.5);
}

参考

mdn | rgb()

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?