HTMLでWebページの背景画像を設定する方法

今日は、HTMLでWebページの背景画像を設定する方法を、Webページ全体のレイアウトを考えて設定できる方法と、それぞれの方法の違いについて説明します。背景画像を設定するためのヒント

Web ページの単色の背景

純粋な色の Web ページの背景がある場合は、background本文の背景色を設定するだけです

body{background:#FFF}

Web ページの背景を白に設定します

body{background:#FFF url(bg.gif)repeat-x 0}

この 画像 をこのように設定します 背景画像は Web の上部に対して水平に並べて表示されます。ここでは、画像のパスに応じてインポートを設定することに注意してください。

2. 水平方向のタイルの背景画像

たとえば、2014 バージョンの Web ページには、グラデーション タイルと同じ原理があり、それを水平方向にタイル表示するための本文の背景として使用します。全画面 Web ページの背景が覆われます。

コードは最初のものと同じですが、写真が異なるだけです。背景画像を本体に横に並べて配置するように設定します。

不規則な大きな画像の背景

テーマ別のウェブページや画像のWebページをよく見かけますが、背景は背景として非常に大きな画像であり、通常、ワイドスクリーンモニターとナロースクリーンモニターの両方で、写真と同じように全画面の背景画像を表示できます。同じ幅とサイズに適応します。実際、この実装は非常に簡単です。たとえば、このようなワイドスクリーン ディスプレイで閲覧したい場合、この画像の幅とアート デザインを十分に大きくします。この Web ページを画面全体に表示するには、背景画像を 2560 ピクセル以上の幅で作成する必要があります。このようにして、Web ページをワイドスクリーンまたは狭いスクリーンのモニターで開いたときに全画面に表示されます。背景画像は、ブラウザ ウィンドウを最小化、最大化、または変更するときに全画面で開くことができ、背景画像が適応的にサイズ変更されるように見えます。

重要点: フルスクリーンのアダプティブ背景画像の鍵は、画像を十分な幅にして、最も広い解像度でも画面いっぱいに表示できるようにすることです。解像度が低くても自然に画面いっぱいに表示されます。同時に、このような背景画像を本文背景として設定し、中央揃えにする必要があります。

この背景画像が次であるとします: bg.jpg

CSS コードを設定します:

body{background: url(bg.jpg) no-repeat center 0}

コードの説明: この画像を Web ページの背景として設定します。通常はタイルなし (繰り返しなし)、水平方向の中央揃えで表示されます。上部

頭 背景画像と下部背景画像のコンテンツの高さは増減できますが、頭部と下部の背景は変更されません

ここでは、レイアウトを設定するための 2 つの一般的な頭部と下部の背景画像テクニックを紹介します。

このメソッドは、頭の背景画像を中央と上部に表示される体の背景に直接設定し、同時に下部の著作権 DIV の幅を 100% に設定し、この背景画像または背景色を設定します。

body{background: url(bg.jpg) no-repeat center 0} 
#footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}

このようにして、コンテンツの高さに影響されずに、頭の下にさまざまな背景を実現できます。

下部の背景画像は、著作権で保護された下部ボックスの高さをはるかに超えています。

このような構造は、上部と下部に異なる画像があり、中央のコンテンツが増えても背景のレイアウトには影響しません。これは、通常、html タグと本文に背景を設定することで実現できます。

一番上の濃い青の背景画像が「top.jpg」、一番下の水色の背景画像が「foot.jpg」であるとします。

DIV CSS は Web ページの背景キーを設定します CSS コード:

html{background: url(top.jpg) no-repeat center 0} 
body{background: url(foot.jpg) no-repeat center bottom}

説明: 濃い青を設定します背景画像を HTML 背景の水平方向の中央に配置します。 上に、水色の背景画像を本文の背景画像として水平方向の中央に設定します。

上記は、いくつかの一般的な Web ページの背景レイアウト設定の概要です。div がこの Web ページの背景に設定されている場合、柔軟な設定で本文、HTML、および div の背景を設定できます。この場合、この DIV の高さは設定できません (デフォルトは自動です)。DIV の幅は 100% に設定できます。

Web ページの背景画像の設定は以上です。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

関連記事:

HTMLでフォントの色を設定する方法

HTMLでスペース文字を入力する方法

DIVのCSSスタイルを設定する必要があるのはなぜですか?

以上がHTMLでWebページの背景画像を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。