Tailwind CSS 練習問題 58:CSSの背景画像繰り返し制御
Tailwind CSSにおいて、背景画像が要素の領域より小さい場合に、画像が縦横に繰り返されて表示されるのを防ぎたい(1度だけ表示したい)場合、正しいクラスはどれか。
- `bg-once-only` というクラスを使用する
- `bg-no-repeat` というクラスを使用する
- `bg-single` というクラスを使用する
- `bg-not-loop` というクラスを使用する
- `bg-fixed-img` というクラスを使用する
正解と解説を見る
正解:`bg-no-repeat` というクラスを使用する
背景画像が繰り返されるのを防ぐには、`bg-no-repeat`というクラスを使用するのが正解です。
【正解の理由】
ブラウザのデフォルトでは背景画像は要素の領域に合わせて縦横に繰り返されます。これを防ぐ(CSSの`background-repeat: no-repeat`を適用する)ためには、Tailwindの`bg-no-repeat`を使用します。
【不正解の理由】
• 「`bg-once-only` というクラスを使用する」は誤り。そのようなクラスはTailwindには存在しません。
• 「`bg-single` というクラスを使用する」は誤り。存在しないクラス名です。
• 「`bg-not-loop` というクラスを使用する」は誤り。直感的に見えますが、公式のクラス名ではありません。
• 「`bg-fixed-img` というクラスを使用する」は誤り。背景を固定する機能は`bg-fixed`ですが、繰り返しの制御とは異なります。