HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img>

1. <img> タグとその src 属性

HTML では、画像は <img> タグによって定義されます。 <img> は空のタグです。つまり、属性のみが含まれ、終了タグはありません (「/>」で直接終了します)。ページに画像を表示するには、ソース属性 (src) を使用する必要があります。 src は「ソース」を意味します。ソースプロパティの値は、画像の URL アドレスです。画像を定義する構文は <img src="url" /> です。URL は画像が保存されている場所を指します。ブラウザは、イメージタグが出現するドキュメント内のイメージを表示します。

<!-- src 属性が指定された img のみ -->
<img src="images/bjpowernode.jpg" />

2. <img> タグのその他の属性

alt 属性: 画像の置き換え可能なテキスト文字列を定義するために使用されます。画像を表示できない場合は、alt 属性で定義されたテキストが表示されます。画像が正常に表示されると、マウスを画像の上に置くと、「クリックすると拡大画像が表示されます」などのフローティングプロンプトが表示されます。ページ上の画像に代替テキスト属性 (alt) を追加するのは良い習慣です。これにより、情報の表示が改善され、テキストのみのブラウザを使用するユーザーにとって非常に便利です。さらに、XHTML1.0 標準では、alt 属性の使用が義務付けられています。 <img> タグに alt 属性がない場合、VS に次のプロンプトが表示されます。

タイトル属性: マウスを画像の上に置いたときにテキストを表示するために使用されます。画像の説明テキストです。たとえば、多くの Web サイトでは、画像を閲覧するときに「クリックすると次のページにジャンプする」機能が備わっています。

alt 属性と title 属性の違い: <img> タグの alt 属性は、ブラウザの互換性、読み込み失敗、またはアドレスエラーにより画像が表示されない場合に、閲覧ユーザーに提供される代替言語です。その性質は画像の代替です。一方、img タグの title 属性は、画像に関する追加情報を表します。その性質はコメントまたは注釈であり、マウスがその上を通過するとテキストが表示されます。

border 属性: 境界線を指定します。border="0" の場合、境界線は表示されません。

幅と高さの属性: 画像の表示サイズを指定します。指定しない場合は、画像の元のサイズが使用されます。元のサイズであっても、幅と高さを指定することをお勧めします。サイズを指定しないと、画像がページ上のスペースを占有しないためです。ダウンロード後に画像のサイズを変更すると、ページのレイアウトが乱雑になります。幅と高さが指定されている場合は、画像がまだ読み込まれていなくても使用されます。

<img src="images/1499417200939140562.jpg" />
 <!--画像の alt 属性を指定します-->
<img src="images/1499417200939140562.jpg" alt="美しい写真" />
<!--title 属性で画像を指定します-->
<img src="images/1499417200939140562.jpg" alt="美しい写真" title="ハハ" />
 <!--画像の幅と高さを設定します-->
<img src="images/xxxx.gif" title="img" alt="img" width="454" height="340" />

3. ハイパーリンクとしての <img>

<img> をハイパーリンク (つまり、画像ハイパーリンク) として使用すると、<img> タグが <a></a> タグのリンクオブジェクトとして使用されます。注意: <img> がハイパーリンクオブジェクトとして使用されている場合、IE ブラウザーは <img> に青い境界線 (border="1") を自動的に追加します。これは多くの場合、望ましくありません。border="0" を設定すると境界線をキャンセルできます。

<!--画像ハイパーリンク、ハイパーリンク オブジェクトとして img タグを使用します-->
<a href="../HTMLHyperlink.html" title="HTML ハイパーリンク構文">
<img src="http://www.bjpowernode.com/image/m.jpg" border="0" alt="画像リンク" />
</a>

2. HTMLの背景

1. 背景色（Bgcolor）

background-color プロパティは、背景を特定の色に設定します。プロパティ値には、16 進数、RGB 値、または色名を指定できます。

<body bgcolor="#000000"> <!--16進数の色の値-->
<body bgcolor="rgb(0,0,0)"> <!--rgb カラー値-->
<body bgcolor="black"> <!--色名-->

2. 背景

background プロパティは、背景を画像に設定します。属性値は画像の URL です。画像のサイズがブラウザウィンドウより小さい場合、画像はブラウザウィンドウ全体に複製されます。注意: Web ページの表示を高速化し、Web サイトの使いやすさを向上させるには、背景画像のサイズが 10k を超えないようにしてください。

<body background="clouds.gif"> <!--相対URL-->
<body background="http://www.bjpowernode.com /clouds.gif"> <!--絶対 URL-->

注: 新しい標準では、HTML 要素の背景色 (bgcolor) 属性と背景画像 (background) 属性は廃止されました。代わりに、CSS を使用して要素の背景色と背景画像を設定します。

3. 色

1. 色

色は赤、緑、青の混合です。色の値: 色は、赤、緑、青の値 (RGB) で構成される 16 進表記で定義されます。各色の最小値は 0 (16 進数: #00) です。最大値は255（16進数: #FF）です。たとえば、黒の色名は black で、16 進数表現は #000000、RGB 値は rgb (0,0,0) です。

2. 色名

W3C の HTML 4.0 標準でサポートされている色名は 16 色のみです。カラーは、アクア、ブラック、ブルー、フクシア、グレー、グリーン、ライム、マルーン、ネイビー、オリーブ、パープル、レッド、シルバー、ティール、ホワイト、イエローです。他の色を使用する必要がある場合は、16 進数の色の値を使用する必要があります。

3. ウェブセーフカラー

数年前、ほとんどのコンピューターが 256 色しかサポートしていなかったときに、216 色の Web セーフカラーのセットが Web 標準として提案されました。その理由は、Microsoft および Mac オペレーティングシステムでは、40 種類の予約済みの固定システムカラー (それぞれ約 20 色) が使用されているためです。 4.216 クロスプラットフォームカラー

もともと、256 色のパレットを使用するときにすべてのコンピューターですべての色が正しく表示されるようにするために、216 色のクロスプラットフォーム Web セーフカラーが使用されていました。

<<: MySQL 8.0.22 winx64 のインストールと設定のグラフィックチュートリアル

>>: Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。