`url()` 関数内で CSS 変数を使用できますか?

URL 式内で CSS 変数を補間できますか?

CSS では、カスタム プロパティ (CSS 変数とも呼ばれます) が便利な方法を提供します値をプログラム的に保存および変更します。ただし、バックグラウンド プロパティなど、URL 関数内で変数値を補間しようとすると、制限が発生する可能性があります。

例:

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

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

残念ながら、このような補間は、従来の理由による url() 関数。 CSS パーサーは、url(var(--url)) を個別のトークンとしてではなく、単一の無効な url() トークンとして扱います。

rgba() などの CSS 関数では補間が一般的に利用可能ですが、補間は許可されていません。潜在的な曖昧さと解析の問題のため、url() は使用されません。

したがって、URL 文字列全体を明示的に定義する必要があります。カスタム プロパティが必要です:

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

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

または、JavaScript を使用して目的の補間を実現できます。

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