ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS はレスポンシブな全画面背景画像を実装します
CSS はレスポンシブな全画面背景画像を実装します
- 巴扎黑オリジナル
- 2017-05-27 17:24:362672ブラウズ
現在、最も人気のある Web ページ形式の 1 つは、全画面の大きな画像です。この記事では、この効果を実現する最も簡単な方法を使用します。 CSSプロパティのbackground-sizeが使用されます 、JavaScriptは必要ありません。
コアコンセプト
background-size属性を使用してビューポート全体を埋めます
css属性のbackground-size値がcoverの場合、ブラウザは自動的に幅と幅を調整しますビューポートの幅と高さ以上になるまで、背景画像を高さに比例して配置します
メディアクエリを使用して、モバイルデバイスに小さいサイズの背景画像を提供します
なぜ小さいサイズを提供する必要があるのですかモバイルデバイス用の背景画像のサイズは? デモで表示される背景画像の実際のサイズは 5498px * 3615px、このような大きなサイズの画像を使用する目的は、1.7MB の画像サイズを犠牲にして、ほとんどのワイドスクリーン モニタでぼやけずに表示できるようにすることです。
しかし、モバイルデバイスではそのような大きな画像を使用する必要はありません。同時に、特にモバイルネットワークでは、大きな画像は読み込み速度を遅くします。
モバイルデバイス用の小さな背景画像の提供は、この技術ソリューションではオプションであることに注意してください。
練習
HTML
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>後で、背景画像がブラウザのビューポート全体を埋めることができるように、bodyタグの背景画像を指定します。
実際、このソリューションはすべてのブロックレベルのコンテナーに対して効果的です。ブロックレベルのコンテナの幅と高さが動的である場合、背景画像はコンテナ全体に合わせて自動的に拡大および縮小します。
CSS body タグのスタイルは次のとおりです:
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #**46;
}上記の最も重要なものは次のとおりです:
background-size: cover;
このようにして、ブラウザは背景画像を幅と高さになるまで比例して拡大縮小します。背景画像の幅と高さがコンテナの幅と高さ以上である必要があります (上記の例では、body タグです)。
ここで注意すべき点は、背景画像が body タグのサイズより小さい場合 (たとえば、高解像度ディスプレイ上、またはページ コンテンツが特に大きい場合)、ブラウザーは画像を引き伸ばすことです。 。画像を引き伸ばすとぼやけることは誰もが知っています。
したがって、背景画像を選択するときは、サイズに特に注意してください。大きな画面サイズを考慮して、デモで使用される画像サイズは 5498px * 3615px です。
同時に、背景画像をビューポートに対して中央に配置するために、次のように宣言します:
background-position: center center;
上記のルールは、背景画像のスケーリングの原点をビューポートの中心に配置します。
次に解決する必要がある問題は、コンテンツの高さがビューポートの高さよりも大きい場合、スクロール バーが表示されることです。ユーザーがスクロールしても、背景画像がビューポートに対して固定されたままになるようにします。
解決策は、
background-attachment: fixed;
献身）小さい画面
それ 画像サイズを圧縮します。これにより、画像サイズが 1741KB から 114KB に減少し、93% 節約されます。
以下はメディア クエリの記述方法です:
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}🎜 上記のメディア クエリは最大幅: 767px になります。
ブレークポイントとして設定すると、ブラウザーのビューポートが 767 ピクセルより大きい場合は大きな背景イメージが使用され、それ以外の場合は小さな背景イメージが使用されます。 🎜🎜 上記のメディア クエリを使用する場合の欠点は、ブラウザ ウィンドウを 1200 ピクセルから 640 ピクセル (またはその逆) に縮小すると、大小の背景画像が読み込まれるときに一瞬ちらつくことです。 🎜以上がCSS はレスポンシブな全画面背景画像を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。