web-dev-qa-db-ja.com

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

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

:root {
  --color: #f0f0f0;
}

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

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

これをどうやってやるの？私はプリプロセッサを使用せず、CSSのみを使用しています。すべてCSSの回答を希望しますが、JavaScript/jQueryを受け入れます。

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

csscolorscss-variables
83
JoshyRobot

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

ただし、カスタムプロパティを使用すると、16進値をrgba()で使用するRGBトリプレットに変換し、その値をカスタムプロパティ（カンマを含む！）に格納し、var()を使用してその値を希望のアルファ値を持つrgba()関数に置き換えることができます。それだけで動作します：

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

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

#element {
  background-color: rgba(var(--color), 0.5);
}
<p id="element">If you can see this, your browser supports custom properties.</p>

これは、あまりにも良いと思われます。1 どのように機能しますか？

魔法は、プロパティ値のvar()参照を置き換えるときに、カスタムプロパティの値がas isに置き換えられるという事実にあります。beforeプロパティの値が計算されます。これは、カスタムプロパティに関する限り、例の--colorの値はまったくカラー値ではないことを意味しますuntilは、カラー値を期待する場所にvar(--color)式が表示されます（そしてそのコンテキストでのみ）。 セクション2.1 css-variables仕様の場合：

カスタムプロパティに許可される構文は非常に寛容です。 <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によって読み取られ、実行される可能性があります。

そして セクション ：

プロパティに1つ以上のvar（）関数が含まれていて、それらの関数が構文的に有効である場合、プロパティの文法全体が解析時に有効であると見なされる必要があります。 var（）関数が置換された後、計算値の時間でのみ構文チェックされます。

これは、上記の240, 240, 240値がrgba()関数beforeに直接代入され、宣言が計算されることを意味します。したがって、この：

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

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

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

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

さらに一歩進んで、アルファコンポーネントを独自のカスタムプロパティに保存できます。

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

それを同じ結果で置き換えます：

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

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

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

134
BoltClock

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

あなたが使用している場合、例えば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ではないため、文字列補間はlighten()などの非CSSのscss関数では機能しないことに注意してください。それでも有効なscssであるため、コンパイル時にエラーは発生しません。

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

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

不透明度を0〜1の任意の値に置き換えます

1
Pizza lord

これは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>
1
Roberrrt

私は同じような状況にありましたが、残念なことに、変数はrgbからhslからhexまで、または色の名前でもかまいませんでした。
background-colorとopacityを擬似:after要素に適用することで、この問題を解決しました。

.container {
    position: relative;
}

.container:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

背景を適用する要素によっては、スタイルを少し変更する必要がある場合があります。
[。

0
Springrbua

CSSでは、rgba値を使用できる必要があります。

#element {
  background: rgba(240, 240, 240, 0.5);
}

または、単に不透明度を設定します。

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}
0
Patrick H.

各色に特定の変数/値を設定できます-オリジナルと不透明度を持つもの：

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}
<div id="a1">asdf</div>
<div id="a2">asdf</div>

これを使用できず、javascriptソリューションで問題ない場合は、これを使用できます。

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});
:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>
0
Dekel

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

  1. ルート内で自分の色を宣言しますが、他の答えと同じようにrgb（）を使用しないでください。値を書き込むだけです
:root{
  --color : 255,0,0;
  }
  1. 他の回答としてvar（）を使用して--color変数を使用
#some-element {
  color : rgba(var(--color),0.5);
}
0
Dani Fadli