/ /ウェブサイトのレイアウト:HTMLで背景画像を作成する方法

ウェブサイトのレイアウト:HTMLで背景画像を作成する方法

多くの初心者タイプセッター、理解のみサイトを作成するという本質において、HTMLで背景画像を作成する方法をよく疑問に思います。そして、一部の人々がこのタスクを理解できる場合、モニターの全幅に画像を引き伸ばしている間に問題が発生します。同時に、サイトをすべてのブラウザで平等に表示したいので、クロスブラウザの互換性の要件を満たす必要があります。背景を設定するには、HTMLタグとCSSスタイルを使用する2つの方法があります。それぞれが最適なオプションを選択します。もちろん、CSSスタイルはコードが別のファイルに保存され、サイトのメインタグの余分な列を占有しないため、はるかに便利ですが、最初にサイトの背景に画像を設定する簡単な方法を検討します。

htmlフルスクリーンで画像を背景にする方法

背景を作成する基本的なHTMLタグ

だから、私たちは写真を作る方法の問題に向かいますHTMLフルスクリーンの背景。サイトを美しく見せるためには、かなり重要な詳細を理解する必要があります。単にグラデーションの背景を作成するか、単色で塗りつぶすだけで十分ですが、背景に画像を挿入する必要がある場合、モニターの幅いっぱいには伸びません。画像は、最初に選択するか、サイトページが表示される拡張機能を使用して、設計によって個別に作成する必要があります。背景画像の準備ができてから、「画像」という名前のフォルダに転送します。その中に、使用したすべての写真、アニメーション、その他のグラフィックファイルを保存します。このフォルダーは、すべてのhtmlファイルがあるルートディレクトリにある必要があります。これで、コードにアクセスできます。背景を画像に変更するコードを記述するためのオプションがいくつかあります。

  1. タグ属性を記述します。
  2. HTMLコードのCSSスタイルを使用。
  3. CSSスタイルを別のファイルに記述します。

HTMLで背景を画像にする方法はあなたが決めるが、私はそれが最も最適である方法についていくつかの言葉を言いたいです。タグ属性を介した書き込みによる最初の方法は、長い間廃止されています。 2番目のオプションは非常にまれなケースで使用されますが、それは多くの同じコードが判明したからです。そして、3番目のオプションは最も一般的で効果的です。 HTMLタグの例を次に示します。

  1. タグ属性(ボディ)を介して書き込む最初の方法index.htmファイル。このように書かれています:(body background = "FolderName / PictureName.extension")(/ body)。つまり、名前が「Picture」で拡張子がJPGの写真があり、フォルダーを「Images」と呼ぶと、HTMLコードは次のようになります。(body background = "Images / Picture.jpg")...(/ body) 。
  2. 2番目の記録方法はCSSスタイルに影響しますが、index.htmと同じファイルに書き込まれます。 (body style = "background:url(" ../ Images / Picture.jpg ")")。
  3. И третий способ записи производится в двух файлах.次の行は、(head)タグにindex.htmという名前でドキュメントに書き込まれます:(head)(link rel = "stylesheet" type = "text / css" href = "Path to CSS file")(/ head)。また、style.cssという名前のスタイルシートには、body {background:url(Images / Picture.jpg ")}と書いてあります。

ウェブサイトの背景html画像の作り方

背景をHTMLで画像にする方法を作成しました。次に、画面全体の幅に画像を拡大する方法を理解する必要があります。

背景画像をウィンドウの幅に引き伸ばす方法

パーセンテージ画面を想像してください。画面の幅と長さ全体が100%x 100%になることがわかりました。この幅まで画像を引き伸ばす必要があります。 style.cssファイルの画像に線を追加します。これにより、画像がモニターの幅と長さ全体に引き伸ばされます。これはCSSスタイルでどのように書かれていますか?すべてがシンプルです!

{

背景:url(Images / Picture.jpg ")

背景サイズ:100%; / *このエントリは、ほとんどの最新のブラウザに適しています* /

}

そこで、写真を背景にする方法を見つけましたhtmlフルスクリーン。 index.htmファイルに書き込む別の方法があります。この方法は時代遅れですが、初心者にとっては、この方法を知って理解する必要があります。タグ(ヘッド)(スタイル)div {background-size:cover; }(/ style)(/ head)このエントリは、ウィンドウの幅全体に配置される背景用の特別なブロックを選択することを意味します。最新のブラウザで画像が画面の幅いっぱいに引き伸ばされるように、ウェブサイトの背景をhtml画像にする2つの方法を検討しました。

固定背景を作成する方法

写真を次のように使用することにした場合将来のWebリソースの背景を理解したら、長さを伸ばしたり、美的外観を損なわないように、静止させる方法を学ぶ必要があります。 HTMLコードを使用してこの小さな追加を書くのは簡単です。 background.url(Images / Picture.jpg ")を修正した後、style.cssファイルに1つのフレーズを追加するか、セミコロンの後に別の行を追加する必要があります-position:fixed。したがって、背景画像は動かなくなります。サイトのコンテンツをスクロールすると、テキスト行が動いていることがわかりますが、背景はそのままなので、htmlを使用して背景を画像にする方法をいくつかの方法で学習しました。

htmlの例

HTMLでテーブルを操作する

多くの未経験のWeb開発者が直面しているテーブルとブロックは、多くの場合、htmlテーブルの背景に画像を作成する方法を理解していません。すべてのHTMLおよびCSSスタイルのコマンドと同様に、このWebプログラミング言語は非常に単純です。そして、この問題の解決策は、数行のコードを書くことです。テーブルの行と列の書き込みは、それぞれ(tr)タグと(td)タグとして示されることを既に知っているはずです。テーブルの背景を画像として作成するには、(table)、(tr)、または(td)タグに、写真へのリンクを含む簡単なフレーズを追加する必要があります:background = pictureのURL。明確にするために、いくつかの例を示します。

背景の代わりに写真があるテーブル:HTMLの例

2x3の表を描いて背景画像にしましょう。「画像」フォルダに保存:(テーブルの背景=「画像/ Picture.jpg」)(tr)(td)1(/ td)(td)2(/ td)(td)3)(/ td)(/ tr )(tr)(td)4(/ td)(td)5(/ td)(td)6(/ td)(/ tr)(/ table)。したがって、テーブルは写真の背景に塗りつぶされます。

html画像を表の背景にする

ここで、同じプレートを2x3の寸法で描画しますが、1、4、5、6の列に画像を挿入します。(テーブル)(tr)(td background =“ Images / Picture.jpg”)1(/ td)(td)2(/ td)(td)3( / td)(/ tr)(tr)(td background =“ Images / Picture.jpg”)4(/ td)(td background =“ Images / Picture.jpg”)5(/ td)(td background =“ Images /Picture.jpg")6(/td)(/ tr)(/ table)。表示後、テーブル全体ではなく、登録したセルにのみ背景が表示されます。

HTMLで背景画像を作成する方法

クロスブラウザサイト

のようなものがありますクロスブラウザWebリソース。これは、サイトのページがさまざまな種類とバージョンのブラウザで等しく正しく表示されることを意味します。この場合、必要なブラウザーのHTMLコードとCSSスタイルをカスタマイズする必要があります。さらに、スマートフォンの開発の現代では、多くのWeb開発者がモバイルバージョンとコンピューターの外観に適合したサイトを作成しようとしています。