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でWebページの背景画像を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML(拡張可能なマークアップ言語)は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
