今日のチキンスープ: あなたが学びたいと思うすべての瞬間は、あなたが助けを求める未来です
プロジェクトのホームページに背景として大きな画像があるとします。ネットワークが良好でない場合、この画像の読み込みは確実に遅くなり、ユーザーには大きな白い画面が表示され、エクスペリエンスに大きな影響を与えます。これは、ファースト スクリーンの最適化に関する昔ながらの問題でもあります。例えば
//html
<div class="container">home</div>
// css
.container {
background: url('xxx.png');
}この問題を最適化するために、この最初の画面要素の色に似た背景色を追加できます。
初心者なら間違いなくこう書くと思いますが、背景属性を追加で書きますか？しかし、これだけでは十分ではありません。CSS の優先順位ルールに従って、画像が読み込まれる前に画面はまだ空白のままです。
//html
<div class="container">home</div>
// css
.container {
background: red;
background: url('xxx.png');
}したがって、background-image 属性を使用できます。
//html
<div class="container">home</div>
// css
.container {
// 注意这个 url 和 颜色的顺序不能变, 默认颜色放右边
background-image: url('xxx.png'), red;
}なぜ背景画像の値の順序は変更できないと言えるのですか、mdnの公式文書には次のように書かれています
背景画像 描画時、画像はz方向に積み重ねられます。最初に指定した画像は、後で指定した画像の上に描画されます。したがって、指定された最初の画像は「ユーザーに最も近い」画像になります。
この方法でのみ、画像がロードされる前に赤色を表示できます。
画像が透明な場合は、画像 + 赤のオーバーレイ効果が期待どおりではない可能性があるため、これを行わないでください。
もう一つの知識のポイントは、
要素の 境界線は 要素の上に描画され、 背景色は 要素の下に描画されます。画像とボックスの描画とボックスの境界線との関係は、CSS プロパティのbackground-clip および background-originで定義する必要があります 。
そのため、背景のさまざまな属性の描画ルールを理解する必要があります。
ルールは次のとおりです (z 軸方向)。
背景色 ——> 背景画像の後に指定した値（右） ——> 背景画像の前に指定した値（左） ——> 境界線の色