CSS 変数は「url()」関数内で使用できますか?

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

CSS 変数は広く使用されていますが、補間に関しては依然として制限がありますurl() 関数内でそれらを指定します。この制限は、url() トークンの従来の性質から生じます。

最新の CSS では、カスタム プロパティの補間が基本的な機能です。これにより、rgba() などのさまざまな関数に動的な値を挿入できます。ただし、url() 関数は、この規則の例外となります。

url(var(--url)) を使用する場合、パーサーはそれを、次のトークンの組み合わせとしてではなく、単一の url() トークンとして解釈します。 url() 関数トークンと変数式。その結果、変数は URL 自体として扱われ、補間が無効になります。

この問題を回避するには、url() で複数の変数式から URL トークンを構築しないようにします。これには、 --uo: url(; --uc: ); などのアプローチが含まれます。および背景: var(--uo) var(--url) var(--uc);。カスタム プロパティには、一致しない文字列区切り文字や url() トークンの一部を含めることはできません。

背景の場合、解決策は、カスタム プロパティ内で完全な url() 式を指定し、それを直接置換することです。

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

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

また、var() の代わりに JavaScript を利用して補間を実行することもできます。

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