CSS の背景プロパティに「エラー: CSS: 背景: / は不正な演算子です」と表示されるのはなぜですか?

CSS バックグラウンド エラー: 間違ったオペレーターのトラブルシューティング

Web 開発の領域では、CSS エラーが発生することは珍しいことではありません。このようなエラーの 1 つである「エラー: CSS: 背景: / は不正な演算子です」は、背景プロパティの設定に短縮構文を使用すると発生します。

次の HTML コード スニペットを考えてみましょう:

<div>
<p>このコードでは、background プロパティにスラッシュ (/) が含まれています。 HTML 検証ツールによると、このスラッシュは間違った演算子です。</p>
<p>このエラーを理解する鍵は、背景プロパティを指定するための正式な構文にあります。</p>
<pre class="brush:php;toolbar:false">background: url(...) <background-position> [/<background-size>] [<repeat-style>]</repeat-style></background-size></background-position>

スラッシュ (/) 「background-position」と「background-size」の値を区切ります。したがって、この例の正しい構文は次のようになります。

background: url(...) 100% 0 / 4% no-repeat;

ここで、「background-position」は「100% 0」(水平方向および垂直方向の配置) に設定され、「background-size」は に設定されます。 「4%」 「no-repeat」値は、画像が繰り返されないことを指定します。

短縮構文を使用する場合、「background-size」は常に「background-position」とともに含める必要があることに注意してください。ただし、「background-size」を指定せずに「background-position」を指定することも可能です:

background: url(...) 100% 0 no-repeat;

正しい構文に従うことで、開発者は「background: / は不正な演算子です」エラーを回避でき、背景画像が適切にレンダリングされるようにします。