CSS を使用して Web ページの背景を制御する

Web ページの背景に適した写真についてよく悩むと思います。これもまた真実だと思います。写真が大きすぎたり、小さすぎたり、乱雑すぎたりするためです。では、写真を作成する方法はありますか。あなたはホームページにどのような興味を持っていますか?答えは「はい」です。それを実装する方法を知りたい場合は、皆さん、今すぐ私に従ってください。すぐに習得できることを保証します。ただし、オンラインで「家族を始めたい」と考えている私の友人は、一般的に、インターネットカフェで「開く」（私と同じように、他の人のホームページから関連するコードを引っ張ってきて変更しただけです）と、DWまたはDWを使用する人に分かれています。自宅でFPなどの専門ソフトを使って作成・アップロードすることもできるので、まずはネットカフェを「開業」する友人のために、最後にいくつか簡単に紹介したいと思います。 DW4 で作成された背景スタイル。実際、やり方が違うだけで、すべては同じだと言わざるを得ません。さて、噂話はこれくらいにして、本題に入りましょう。

背景といえば、背景色とカラー画像だけですが、この2つにbgcolor="#808080"とbackground="URL"を追加するのは皆さんご存知だと思いますが、今回紹介するのは。やり方ではありませんが、CSSスタイルを使ってやりますので、少し面倒ではありますが、全体のコーディネートはとても良いです。

・背景色

これはもう説明する必要はないと思いますが、カラーコードは英語に置き換えられるか、コードで指定されます。このデフォルト値は透明です。
例: body{background-color: yellow}
H1{background-color:#000000}

・背景画像background-image

HTMLでの背景画像と背景色の設定は基本的に同じで、関連するステートメントを追加して完成させます。ただし、ここではこの方法について言及しているのではなく、私が使用する方法は CSS です。背景画像の主な機能は画像を表示することです。画像を表示しない場合は、最後に URL (画像のアドレス) を追加するだけです。デフォルトは none なので、追加したい場合は最後に none を追加するだけです。
例: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')}
h1{background-image:url('none')}

使用している背景写真を使っていると、一部の写真が小さすぎたり、写真が何度も出てきてページ全体の美しさが損なわれたり、差し替えるのに不適切な写真があったりと、面倒な場面に遭遇することも多いと思います。しかし、次の方法を使用して CSS で画像を制御する限り、今後はそのような問題は発生しなくなります。

· 画像が繰り返し表示されるかどうか (background-repeat)水平方向、垂直方向の繰り返し、両方向の繰り返し)、これら 3 つの方向の繰り返しを実現するには、background-repeat の後にrepeat-x (水平方向に広がる)、repeat を追加するだけです。repeat -y (垂直方向に広がる)、repeat (2 つに広がる)方向）。もちろん、写真の複製を制御することもできますし、写真の非複製を制御することもできます。 no-repeat は、背景画像が繰り返し表示されるのではなく、1 つだけ表示されることを示すために使用されます。これは、デフォルトでは背景画像を繰り返し表示します (繰り返し)。

例: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat}

・画像表示位置の配置background-position

背景上記の非繰り返し表示設定を使用すると、画像がページの左上隅にのみ表示され、他の場所には表示されないため、上記の設定の後では画像が十分ではないことがよくあります。中央または他の場所 背景画像がある場合は、background-position が役に立ちます。これは、左上隅を基準とした画像の位置を表示するために使用されるため (デフォルト値は 0% 0%)、 2 つの値をスペースで区切って設定します。その主な値は left|center|right および top|center|bottom です。パーセント値を使用して相対位置を指定したり、値を使用して絶対位置を指定したりすることもできます。たとえば、50% は位置が次の位置にあることを示します。水平方向の値は、画像が左上隅の領域から 50px 単位で水平方向に移動することを意味します。ここで注意すべき点は 1 です。値を設定するときは、値を 1 つだけ指定します。これは、次の値を指定するのと同じです。水平位置のみ、垂直位置は自動的に 50% に設定されます。 2. 設定した値が負の値の場合、背景画像が境界を超えていることを意味します。

例: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-position:100px 10px}

·画像をスクロール背景-添付ファイル

上記の 2 つの手順は、画像の配置を完了するのに役立ちますが、ページにスクロール バーがある場合、画像が必要な場合、背景画像がその位置に永久に配置されないため、これを実行した後は完璧ではありません。その位置に永久に配置するには、ページのコンテンツのスクロールに合わせて画像をスクロールさせるだけです。このとき、背景添付はスクロール (静止画) と固定 (スクロール) を追加するだけで済みます。これらのうちで十分です。もちろん、これらをランダムに追加することはできません。結局のところ、スクロールがデフォルトです。つまり、ページのコンテンツと一緒に画像をスクロールすることはできません。
例: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-attachment:fixed}

OK、上記の後設定すれば背景はもっと綺麗になると思いますが、コードが多すぎると可読性が低くなり、エラーが発生しやすくなります。そこで私がここで伝えたいのは、上記のコードをすべて追加して使用することです。たとえば、上記の関連コードを背景に追加します。コードを背景に追加する場合は、各値の間にスペースを追加して区切ります。画像が表示されなくなるのを避けるため、背景画像の URL の後ろに背景カラー コードを置かないでください。
例: body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') fix 100px 50px no-repeat}

最後に、皆さんに思い出していただきたいのですが、次のように直接挿入するとコードを正常に表示するには、次のコードを内側に入れてから間に入れる必要があります。

上記は、CSS を使用して Web ページの背景を制御する方法についてです。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。