324

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

:root {
  --color: #f0f0f0;
}

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

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

どうすればこれを行うことができますか？私はプリプロセッサを使用しておらず、CSS のみを使用しています。すべて CSS の回答を希望しますが、JavaScript/jQuery は受け入れます。

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

4

13 に答える 13

501

既存のカラー値を取得してアルファ チャネルを適用することはできません。つまり、 などの既存の 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仕組みは？

魔法は、プロパティ値の参照を置換するときに、そのプロパティの値が計算される前に、カスタム プロパティの値がそのまま置換されるという事実にあります。これは、カスタム プロパティに関する限り、色の値を期待する式がどこかに現れるまで (そしてそのコンテキストでのみ) 、例の値はまったく色の値ではないことを意味します。css-variables 仕様のセクション 2.1から:var()--colorvar(--color)

カスタム プロパティに許可されている構文は、非常に寛大です。<declaration-value> 生成は、シーケンスに <bad-string-token>、<bad-url-token>、unmatched <)-token>、<]- が含まれていない限り、1 つ以上のトークンの任意のシーケンスと一致します。 token>、または <}-token>、または最上位の <semicolon-token> トークンまたは <delim-token> トークンで、値が "!" です。

たとえば、次は有効なカスタム プロパティです。

--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 カスタム プロパティをサポートしていないブラウザでコード スニペットを実行している場合は、そうです。

于 2016-12-21T14:38:58.953 に答える
37

OPがプリプロセッサを使用していないことは知っていますが、次の情報がここでの回答の一部である場合、私は助けられたでしょう(まだコメントすることはできません。そうでなければ、@BoltClockの回答にコメントしたでしょう.

scss などを使用している場合、上記の回答は失敗します。これは、scss が 4 つのパラメーターを必要とする scss 固有の rgba()/hsla() 関数を使用してスタイルをコンパイルしようとするためです。ただし、rgba()/hsla() もネイティブの css 関数であるため、文字列補間を使用して scss 関数をバイパスできます。

例 (sass 3.5.0 以降で有効):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}
<div></div>

文字列補間は、 などの CSS 以外の scss 関数では機能しないことに注意してくださいlighten()。これは、結果のコードが機能的な CSS ではないためです。ただし、有効な scss であるため、コンパイル時にエラーは発生しません。

于 2017-12-04T02:17:17.467 に答える
5

これは実際に CSS で可能です。少し汚れているだけなので、グラデーションを使用する必要があります。例として小さなスニペットをコーディングしました。暗い背景の場合は黒の不透明度を使用し、明るい場合は白い不透明度を使用する必要があることに注意してください。

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

于 2016-12-21T13:48:42.337 に答える
0 
:root{
--color: 255, 0, 0;
}

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

opacity を 0 から 1 の間の値に置き換えます。

于 2016-12-22T13:13:24.867 に答える
-4

一般的な css 変数で rgba() を使用するには、これを試してください。

  1. :root 内で色を宣言しますが、他の回答のように rgb() を使用しないでください。値を書くだけ

:root{
  --color : 255,0,0;
  }

  1. 他の回答として var() を使用して --color 変数を使用します

#some-element {
  color : rgba(var(--color),0.5);
}

于 2019-08-07T05:03:01.817 に答える