CSS 変数は「url()」関数で補間できますか?

CSS 変数による補間

CSS 変数は url() 関数で補間できますか?

カスタム CSS プロパティは、以下を含むほとんどの関数の補間を容易にします。 rgba()。ただし、url() による補間には、従来の理由による課題があります。

url() の制限は何ですか?

url() トークンは次のように分割できません。 var() 式は、パーサーが var(--url) を引用符で囲まれていない URL として扱うためです。その結果、補間は発生せず、バックグラウンド宣言が無効になります。

代替アプローチ

url() の制限を回避するための実行可能なオプションは次のとおりです。

• カスタムで url() 式全体を指定するproperty:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

• var() の代わりに補間に JavaScript を使用します。

以上がCSS 変数は「url()」関数で補間できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。