CSS 変数にアクセスできるように、Electron を使用してアプリを設計しています。 vars.css でカラー変数を定義しました:
vars.css
この色を main.css で使用したいのですが、不透明度を適用します:
main.css
どうすればいいですか?プリプロセッサは使用せず、CSS のみを使用します。すべて CSS の回答を希望しますが、JavaScript/jQuery も受け入れます。
使用している背景画像は透明であってはいけないため、不透明度は使用できません。
不透明度
既存のカラー値を取得して、それにアルファ チャネルを適用することはできません。つまり、既存の 16 進値 (#f0f0f0 など) を取得し、それにアルファ コンポーネントを与え、その結果の値を別のプロパティで使用することはできません。
#f0f0f0
ただし、カスタム プロパティを使用すると、rgba() で使用するために 16 進値を RGB トリプレットに変換し、値をカスタム プロパティ (カンマを含む) に保存できます。var() 関数を使用して rgba() を目的のアルファ値に変換すると、機能します:
rgba()
var()
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
既存のカラー値を取得して、それにアルファ チャネルを適用することはできません。つまり、既存の 16 進値 (
#f0f0f0など) を取得し、それにアルファ コンポーネントを与え、その結果の値を別のプロパティで使用することはできません。ただし、カスタム プロパティを使用すると、
rgba()で使用するために 16 進値を RGB トリプレットに変換し、値をカスタム プロパティ (カンマを含む) に保存できます。var()関数を使用してrgba()を目的のアルファ値に変換すると、機能します: