ホームページ ウェブフロントエンド CSSチュートリアル HTMLでWebページの背景画像を設定する方法

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

Nov 23, 2017 pm 02:00 PM
html ウェブページ 背景

今日は、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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

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

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

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

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

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

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

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

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

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

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

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

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

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

See all articles