background-colorの省略記法に知見がありましたので共有します。
海外の動画ですが、こちらを引用させていただいております。
background-colorは以下のように一括指定記法を用いてbackgroundで省略することができます。
style.css
div {
background: #fff;
}
しかし、このような場合はどうでしょうか。
index.html
<div class="hero inverted">This is hero area</div>
style.css
.hero {
background-image: url(./images/hero.jpg);
background-size: cover;
height: 500px;
font-size: 5rem;
text-align: center;
line-height: 500px;
}
.inverted {
color: #fff;
background: #333;
}
同一のdiv内に複数のクラスを設定しており、.invertedで一括指定記法を使って背景に#333を指定しています。
これはこのように表示されます。
.heroで指定しているはずの背景画像が表示されません。
原因を開発ツールで確認してみましょう。
background-imageがinitialで上書きされ、.heroで指定した背景画像が無効化されています。
これはなぜかというと、.invertedで一括指定記法で記述したbackground-color以外は指定なしと見做され、initialが指定されているというわけです。initialは初期値という意味です。
参考にbackgroundで関連のプロパティー一覧です。
プロパティ
初期値
意味
background-image
none
背景画像を設定する
background-position
0% 0%
背景画像の初期位置を設定する
background-size
auto auto
要素の背景画像の寸法を設定する
background-repeat
repeat
背景画像をどのように繰り返すかを設定する
background-attachment
scroll
背景画像の固定・移動を指定する
background-origin
padding-box
背景の基準位置を指定する
background-clip
border-box
背景の適用範囲を指定する
background-color
transparent
背景の色を指定する
画像を表示させるには、きちんとbackground-colorと省略せずに記述すればOKです。
style.css
.inverted {
color: #fff;
background-color: #333;
}
意図したところにのみCSSが当たります。
この例からもわかる通り、そもそもbackgroundはbackground-に続く複数のプロパティを一括で指定するためのものであり、ただ省略したいがために使うべきではありません。
私は元々きちんとbackground-colorを使う派だったのですが、一時期調べ物をしているうちにbackgroundで省略している記事が非常に多いことから真似をして省略するようになってしまいました。今でもかなり見かけます。
意図して省略しているならいいですが、そうでなければ省略はすべきではないと私は思います。
↧