web-dev-qa-db-ja.com

グラデーションの透明性のためにrgbaでCSS変数を使用する

透明度のあるグラデーションカラーを指定するときにCSS変数を使用する方法はありますか？.

:root {
  --accent-color: #dfd0a5;
}

h1{
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1));
}
csscss-variables
11
Manish

変数を使用することはできますが、CSSの単一の16進値から個々の赤、緑、青のコンポーネントをサンプリングすることはできません。

単に既存のRGBトリプレットにアルファコンポーネントを適用することを検討している場合は、16進値の代わりに トリプレット全体を10進値のコンマ区切りリストとして指定 で、直接に代入することができます。 rgba()は、単一の不透明なトークンとして機能します。

:root {
  --accent-color: 223, 208, 165;
}

h1 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-color), 1));
}

rgba()を使用して個々のR、G、およびB値を指定および制御する場合は、各色成分の変数を10進値として指定し、rgba()内の各変数を参照する必要があります。そのように機能します：

:root {
  --accent-red: 223;
  --accent-green: 208;
  --accent-blue: 165;
}

h1 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-red), var(--accent-green), var(--accent-blue), 1));
}
25
BoltClock