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 を使用して画像サイズを制御する必要はありません。

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

コードをコピー

コードは次のとおりです:body{背景画像:url("d:images

はは、そのアイデアは良いですが、使用しているブラウザはそれをサポートしていますか? IE や FF では間違いなく見なかったかのように扱われると思います。もしかしたら、私がフォーラム スタイルを設計したとき、それは実現可能だったのか、と疑問に思うかもしれません。上記のコードだけだとBODYのサイズを制御するだけなので絵の制御はできないと思います。もちろん、ここには制御がありません。他のIDタグであれば、タグの範囲サイズを制御できると思います（笑）、もちろん画像のサイズではありません。
正直に言うと、この問題はあなたを悩ませているだけでなく、私も悩ませています。これは単なるプロパティの値であり、実際のオブジェクトではないためです。 CSS コントロールの使用を考えている場合は、忘れずにお知らせください。

補足: W3C は 9 月 10 日に「CSS Backgrounds and Borders Module Level 3」という記事を公開しました。この記事では、これまで見たことのないいくつかの属性が CSS 背景に追加されています。

background-clip ：
background-origin ：
background-size ：背景のサイズ。
バックグラウンドブレイク:

これらの属性は使用できますが、現在、それらをサポートするブラウザはありません。とても残念です。

(4)、背景画像位置制御:

私の部門は背景画像をインポートしましたが、その場所は本当に容認できません。デフォルトでは左上に配置されているためです。しかし、このように配置したくないので、どうすればよいでしょうか?心配しないでください。エキサイティングな瞬間がもうすぐ始まります。ここで、background-position、background-position-x、background-position-y について説明します。

a. 基本文法:

背景位置 : 長さ || 位置
背景位置-x : 長さ 中央 || | 中央 | 下

b. 文法値:

length: パーセンテージ | 浮動小数点数と単位識別子で構成される長さの値。

位置: 上中央 | 下中央 |

c. 例:

body {background-image: url("d:images

長さの値については、次の 3 つの例だけを書きます。

body {background-image: url("d:images
これまで多くの例を述べてきましたが、ポジショニングについてはある程度理解できたと思います。

(5)、背景画像の透明度設定：

時々、画像を透明に設定したいことがあります。

(6). 複数の背景画像の設定:

複数の背景画像の設定については、「CSSを超えて：WEBデザインアートの神髄」で見ました。しかし、1 つのラベルで複数の背景画像をサポートしている現在のブラウザは少なすぎて、私が知っているのは Apple Safari だけなので、非常に残念です。なぜそんなことが可能なのかと疑問に思うかもしれません。この例を読んだ後、「なんてことだ、CSS3 より前は各要素に 1 つの画像しか使用できなかったのだ」と驚かれると思います。勉強したい場合は、すぐに Safari ブラウザをインストールしてください。私にとって、これがトレンドだと思います。一言で言えば、CSS を解釈する能力がより優れている人が開発のトレンドになるでしょう。完璧な WEB 標準を備えている人が、明日のブラウザーのスターになるでしょう。

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

コードをコピーします

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

body {

background-image:url("d:mypic