HTML_HTML/Xhtml_Webページ制作におけるbackground-image属性の設定の詳細説明

写真の場合、私たちが最初に考えるのは背景画像です。なぜなら、装飾の多くは背景画像を使用して実装されているからです。今回はCSSで背景画像を制御することから始めましょう。

定義と使用法

background-image 属性は、要素の背景画像を設定します。

要素の背景は、パディングと境界線を含む要素のサイズ全体を占めますが、マージンは含みません。

デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。

1. CSS コントロールの背景画像:

Web ページのデザインを始めるとき、背景画像が何であるかについてはあまり考えないかもしれません。ほとんどの場合、背景色をデザインするだけなので、理由は非常に単純だと思います。音楽と同じように、Web ページを開く速度に一定の影響を与えます。しかし、一般的な個人のウェブサイトや個人のブログでは、もちろん、完璧すぎるものはありません。つまり、CSS が有効になっている場合です。 、置換コンテンツは表示されないため、ナビゲーション ボタンのテキストや同様の状況に CSS 背景画像を使用することはお勧めできません。
背景画像を制御するための CSS プロパティは多数あり、画像に関連するものであれば、そのほとんどが使用されます。

(1) 背景画像のインポート:

もちろん、最もよく知られているのは、背景と背景画像です。
Web ページの背景画像をデザインするコードは次のとおりです:

body {background:url("d:images

または

body {背景画像:url("d:images

(2) 背景画像の表示方法：

もちろん、上記のコードだけでは思い通りの効果を表現することはできません。画像が小さいと並べて表示されてしまうので、大きいと表示するためにスクロールバーが表示されてしまい、良くありません。したがって、さらに表示制御を実行する必要があります。つまり、background-repeat、を使用する必要があります。 それは値です:

繰り返し: デフォルト値。背景画像は垂直方向と水平方向の両方に並べて表示されます

no-repeat: 背景画像は並べて表示されません

repeat-x: 背景画像は水平方向にのみ並べて表示されます

repeat-y: 背景画像は垂直方向にのみ並べて表示されます

コードについては、CSS を少し知っている人ならわかると思いますが、次のようになります。
:

body {background:url("d:images

(3)、背景画像サイズ制御:

しかし問題は、画像が大きすぎる場合はどうなるかということです。優れた Web ページを作成するには、大きすぎる画像を使用しないことが最善です。上記の理由により、Web ページを開く速度に影響します。 PS か FireWorks を使って処理した方が良いでしょう。ただし、前述したように、CSS を使用して画像サイズを制御する必要はありません。

多くの人は次のコードを自然に使用すると思います:

コードをコピー

コードは次のとおりです: