CSS はレスポンシブな全画面背景画像を実装します-CSSチュートリアル-php.cn

CSS はレスポンシブな全画面背景画像を実装します

巴扎黑

リリース： 2017-05-27 17:24:36

オリジナル

2614 人が閲覧しました

CSS はレスポンシブな全画面背景画像を実装します

現在、最も人気のある 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 サイトの他の関連記事を参照してください。