☰

CSS カラー変数に不透明度を適用するにはどうすればよいですか? 質問する

tag-icon • tag-icon css colors css-variables
CSS カラー変数に不透明度を適用するにはどうすればよいですか? 質問する

私はelectronでアプリを設計しているので、CSS変数にアクセスできます。私は次のように色変数を定義しましたvars.css:

:root {
  --color: #f0f0f0;
}

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

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

これをどうやって実行すればいいでしょうか? プリプロセッサは使用せず、CSS のみを使用します。すべて CSS の回答を希望しますが、JavaScript/jQuery でも構いません。

opacity透明ではない背景画像を使用しているため、使用できません。

ベストアンサー1

既存のカラー値を取得して、それにアルファ チャネルを適用することはできません。つまり、 などの既存の 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()--colorvar(--color)セクション2.1css-variables 仕様の:

カスタム プロパティに許可されている構文は非常に寛容です。<declaration-value> 生成物は、シーケンスに <bad-string-token>、<bad-url-token>、一致しない <)-token>、<]-token>、または <}-token>、または最上位の <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);
}

rgba()これは、少なくとも 4 つのコンマ区切りの数値を想定しているため、最初は有効な CSS ではないように見えますが、次のようになります。

#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));
}

これにより、さまざまなアルファ値をオンザフライで交換できるようになります。

1 確かに、カスタム プロパティをサポートしていないブラウザーでコード スニペットを実行している場合はそうです。

おすすめ記事