HTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析-htmlチュートリアル-php.cn

HTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析

寻∝梦

リリース： 2018-09-11 13:38:33

オリジナル

115071 人が閲覧しました

この記事では、HTMLコードとCSSスタイルコードを使用してHTMLの背景色を設定する方法を説明します。また、背景画像を設定する方法についても紹介します。皆さんのお役に立てれば幸いです。今すぐこの記事を見てみましょう

まず、HTML での背景色の設定を見てみましょう:

最初に背景色を設定し、 body タグ効果を見てみましょう:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body bgcolor="black">
这是PHP中文网
</body>
</html>

ログイン後にコピー

背景色は黒に設定されています。ブラウザに表示される効果を想像できますか?

HTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析

はい、何も表示されません。フォントを色に設定して、表示できるかどうかを確認してみましょう:

<body bgcolor="black">
<p>这是<font color="#E41316">PHP中文网</font></p>
</body>

ログイン後にコピー

それでは、効果を見てみましょう:

HTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析

はい。あまり分かりにくいですが、フォントに色を追加するとテキストが表示されますが、まだ色が付けられていない単語が 2 つあるため、表示できません。

それでは、テキストの背景を作成する方法を見てみましょう:

<body bgcolor="black">
<p style="background-color: #E12125">这是PHP中文网</p>
</body>

ログイン後にコピー

現時点では font タグは機能しなくなっているため、ご覧のとおり、背景色を変更するために断固として CSS スタイルを使用します。 CSS スタイルは背景色を設定するだけです。

ブラウザに表示される効果を見てみましょう:

HTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析

p タグにより、背景が行全体を占めます。この方法では、効果がより明確に見えるので、背景をあまり必要としない場合は、p タグの周囲に div タグを追加して幅を設定する方法だけを説明します。テキストの背景を 1 行に表示しないようにテキストの幅を指定します。これもよく使用される方法の 1 つです。

もちろん、写真を背景画像として使用することもできます。効果の例を見てみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body style="background-image: url(https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg)">
<p>这是PHP中文网</p>
</body>
</html>

ログイン後にコピー

これは、まだ非常に明らかな効果です。例を見てください:

HTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析

これは、Web ページ全体の背景として使用されます。背景画像として使用するのに適した見栄えの良い画像が他の場所から見つかります。その画像を右クリックし、画像アドレスのコピーを選択して、この URL に追加します。これも非常に簡単です。以下でさらに練習して、効果が私と同じかどうかを確認してください。

HTML での背景色の設定に関するこの記事はここで終わります。さらに詳しく知りたい場合は、PHP 中国語 Web サイトの HTML 学習マニュアル列にアクセスして学習してください。ご質問がございましたら、以下にメッセージを残してください。

HTMLでビッグタグを使うには？ HTMLビッグタグの使用例

以上がHTMLで背景色を設定するにはどうすればよいですか? HTMLの背景カラーコードの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。