[解決済み】CSSカラー変数に不透明度を適用する方法は？

質問

electronでアプリをデザインしているので、CSS変数にアクセスすることができます。私は、カラー変数を vars.css :

:root {
  --color: #f0f0f0;
}

でこの色を使いたい。 main.css ただし、若干の不透明度を適用しています。

#element {
  background: (somehow use var(--color) at some opacity);
}

どうすればいいのでしょうか？プリプロセッサーは使わず、CSSのみです。オールCSSの回答が望ましいですが、JavaScript/jQueryも受け付けます。

を使用することはできません。 opacity なぜなら、透過してはいけない背景画像を使っているからです。

解決方法は？

既存の色値を取り出して、アルファチャンネルを適用することはできません。つまり、次のような既存の16進数の値を取り込むことはできません。 #f0f0f0 にアルファ成分を与え、その結果を他のプロパティで使用します。

しかし、カスタムプロパティを使用すると、16進数の値をRGBのトリプレットに変換して rgba() その値をカスタムプロパティに格納し（カンマも含めて！）、その値を var() を rgba() 関数に、希望するアルファ値を入力すれば、そのまま動作します。

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

これは、あまりにも素晴らしいことだと思います。
1 その仕組みは？

このマジックは、カスタムプロパティの値が、以下のように置き換えられることにあります。 そのまま を置き換えたとき var() をプロパティ値で参照します。 以前 の値が計算されます。つまり、カスタムプロパティに関しては、その値が --color の例では、色の値ではありません。 まで a var(--color) 式は、色の値を必要とする場所に現れます（そして、そのコンテキストでのみ）。から セクション2.1 のcss-variables仕様です。

カスタムプロパティに許可される構文は、非常に寛容です。宣言-値(declaration-value)は、1 つ以上のトークンのシーケンスにマッチします。 または、トップレベルの <semicolon-token> トークンか <delim-token> トークンが " の値で含まれていない限り、1つ以上のトークンのシーケンスにマッチします。 の値を持つトークンです。

例えば、以下のようなものが有効なカスタムプロパティとなります。

--foo: if(x > 5) this.width = 10;

この値は、通常のプロパティでは無効であるため、変数としては明らかに無意味ですが、JavaScriptでは読み込んで動作させることができるかもしれません。

そして セクション3 :

プロパティが 1 つ以上の var() 関数を含み、それらの関数が構文的に有効である場合、解析時にプロパティの文法全体が有効であると見なされる必要があります。構文チェックが行われるのは、var()関数を代入した後の値計算時のみです。

つまり 240, 240, 240 に直接代入されます。 rgba() 機能 以前 の場合、宣言は計算されます。だから、これ。

#element {
  background-color: rgba(var(--color), 0.8);
}

のように、最初は有効なCSSでないように見えます。 rgba() はカンマで区切られた4つ以上の数値が必要ですが、このようになります。

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

もちろん、これは完全に有効なCSSです。

さらに一歩進んで、アルファ成分を独自のカスタムプロパティに格納することができます。

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

と代入しても、同じ結果になります。

#element {
  background-color: rgba(var(--color), var(--alpha));
}

これにより、異なるアルファ値を持ち、オンザフライで入れ替えることができます。

¹ <サブ カスタムプロパティをサポートしていないブラウザでこのコードを実行する場合は、そうなります。