擬似クラス
みいと
おじさんのWEBデザイン学習まとめ
backgroundプロパティを使用すると、背景関連のプロパティを一括で設定することができます。
例外はありますが、必要な値を半角スペースで区切って順不同で指定できます。
設定できるプロパティは下記になります。
background-positionとbackground-sizeは、どちらも単位つきの値を指定できるので、どちらの指定なのかわからなくなります。
そのため値が1つの場合は、backgrond-positionの値として扱われます。
background-sizeの値を指定する場合は、まずbackground-positionの値を指定し、「/」で区切った後にbackground-sizeの値を指定します。
background: url(back.png) center center / 100%;
background-clipとbackground-originに指定できる値は全く同じなので、どちらに対する指定なのかわかりません。
そのため、値が1つだけ指定されている場合は、両方に適用されます。
値が2つ指定されている場合は、1つ目がbackground-origin、半角スペースで区切って2つ目がbackground-clipの指定として扱われます。
backgroundで背景設定をする場合には、次の点に注意が必要です。
今回は背景の一括設定についてまとめました。
背景関連のプロパティはたくさんあるので、まとめて指定できるbackgroundプロパティはとても便利です。