Css

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



How Do I Apply Opacity Css Color Variable



解決：

既存のカラー値を取得して、それにアルファチャネルを適用することはできません。つまり、次のような既存の16進値を取得することはできません。＃f0f0f0、それにアルファコンポーネントを与え、結果の値を別のプロパティで使用します。

ただし、カスタムプロパティを使用すると、16進値をRGBトリプレットに変換して使用できます。rgba（）、その値をカスタムプロパティ（コンマを含む！）に格納し、次を使用してその値を置き換えますvar（）をrgba（）関数を希望のアルファ値で使用すると、次のように機能します。



：root {/ * 10進数のRGBで＃f0f0f0 * / --color：240、240、240; }本体{色：＃000;背景色：＃000; } #element {background-color：rgba（var（-color）、0.8）; }
これが表示されている場合、ブラウザはカスタムプロパティをサポートしています。
 
これはほとんど真実ではないようです。1それはどのように機能しますか？
 
 
 
魔法は、カスタムプロパティの値が置き換えられるという事実にあります そのまま 交換時プロパティ値のvar（）参照、 前 そのプロパティの値が計算されます。これは、カスタムプロパティに関する限り、-あなたの例の色は色の値ではありません それまで にvar（-color）式は、色の値を期待する場所に表示されます（そのコンテキストでのみ）。 css-variables仕様のセクション2.1から：
  
 
カスタムプロパティに許可されている構文は非常に寛容です。シーケンスに、、、不一致、、、、またはトップレベルのトークンまたは値が「！」のトークンが含まれていない限り、プロダクションは1つ以上のトークンの任意のシーケンスに一致します。
 
  
 
たとえば、以下は有効なカスタムプロパティです。
 
 
 
--foo：if（x> 5）this.width = 10;
この値は、通常のプロパティでは無効であるため、変数としては明らかに役に立ちませんが、JavaScriptによって読み取られて処理される可能性があります。
 
 
そしてセクション3：
  
 
プロパティに1つ以上のvar（）関数が含まれていて、それらの関数が構文的に有効である場合、プロパティの文法全体が解析時に有効であると見なす必要があります。 var（）関数が置き換えられた後、計算値時にのみ構文チェックされます。
 
 
これは、上記の240、240、240の値は、に直接代入されますrgba（）関数 前 宣言が計算されます。したがって、この：
 
#element {背景色：rgba（var（-color）、0.8）; }
最初は有効なCSSではないようです。rgba（）は、4つ以上のコンマ区切りの数値を想定しており、次のようになります。
 
#element {背景色：rgba（240、240、240、0.8）; }
もちろん、これは完全に有効なCSSです。
 
さらに一歩進んで、アルファコンポーネントを独自のカスタムプロパティに保存できます。
 
：root {--color：240、240、240; -アルファ：0.8; }
そしてそれを置き換えると、同じ結果になります：
 
#element {背景色：rgba（var（-color）、var（-alpha））; }
これにより、オンザフライで交換できるさまざまなアルファ値を使用できます。
 
 
1 そうですね、カスタムプロパティをサポートしていないブラウザでコードスニペットを実行している場合です。
  
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 {/ *これは有効なCSSですが、scssのコンパイルでは失敗します* / background-color：rgba（var（-color_rgb）、0.5）; / *これは有効なscssであり、上記のCSSを生成します* / background-color：＃{'rgba（var（-color_rgb）、0.5）'}; }
  
文字列補間は、CSS以外のscss関数では機能しないことに注意してください。結果のコードは機能的なCSSではないため、lighten（）。ただし、それでも有効なscssであるため、コンパイルでエラーは発生しません。
  
私も同様の状況にありましたが、残念ながら、変数は次のいずれかである可能性があるため、指定されたソリューションは機能しませんでした。rgbからhslから16進数または色の名前。 
私は今、この問題を適用することによって解決しました背景色と疑似への不透明度：後または：要素の前：
 
.container {位置：相対; } .container :: before {content： '';幅：100％;高さ：100％;位置：絶対;左：0;背景色：var（-color）;不透明度：0.3; }
背景を適用する要素によっては、スタイルを少し変更する必要がある場合があります。 
また、すべての状況で機能するとは限りませんが、他のソリューションを使用できない場合に役立つことを願っています。
 
  編集： このソリューションは、ターゲット要素の前に要素を作成し、それに透明な背景色を適用するため、明らかにテキストの色にも影響を与えることに気づきました。 
これは場合によっては問題になる可能性があります。