背景画像を保持しながら CSS カラー変数に不透明度を適用するにはどうすればよいですか?

CSS カラー変数に不透明度を適用する方法

課題:

デザイン時CSS 変数を含むアプリでは、定義されたカラー変数に不透明度を適用する必要が生じる場合があります。ただし、背景画像を保持したい場合は、標準の CSS 不透明度だけでは十分ではありません。

解決策: RGBA 操作

CSS カスタム プロパティを使用すると、独自の解決策が可能になります。カンマを使用して 16 進カラー値を RGB 3 成分に変換することで、カスタム プロパティとして保存できます。 var() 関数を使用すると、この値を rgba() 関数に代入して、目的のアルファ値を指定できます。

たとえば、色変数が与えられた場合、

:root {
  --color: #f0f0f0;
}

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

を使用して 80% の不透明度を適用します。この結果は次のとおりです。 in:

<p></p>

ここで、背景画像を維持しながら要素の背景色は 80% の不透明度を持ちます。

実装メモ:

これこのメソッドはすべての主要なブラウザでサポートされています。ただし、16 進値を 10 進数の RGB に変換するため、状況によっては色表現の精度に影響を与える可能性があることに注意してください。

以上が背景画像を保持しながら CSS カラー変数に不透明度を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。