Webページの背景色をCSSで制御する方法

背景と言えば、背景色とカラー画像しかありませんが、この2つにbgcolor="#808080"とbackground="URL"を追加することは誰でも知っているはずですよね？ , と思っていますが、今回紹介するのはこれを行うのではなく、CSSスタイルを使用する方法なので、少し面倒ではありますが、それでも全体のコーディネートは非常に良くなります。

背景色background-color

これ以上紹介する必要はないと思います。カラーコードは誰もが知っていると思います。代わりに英語を使用するか、表現されたものを使用してください指定されたコードで。このデフォルト値は透明です。例:

body{background-color:yellow} 
H1{background-color:#000000}

(推奨チュートリアル: CSS 入門チュートリアル )

背景画像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-y（垂直方向に広がる）、repeat（両方向に広がる）。

もちろん、画像の重複を制御することもできますし、画像の非重複を制御することもできます。 no-repeat は、背景画像が繰り返し表示されるのではなく、1 つだけ表示されることを示すために使用されます。これはデフォルトではありません。デフォルトでは、背景画像が繰り返し表示されます (リピート)。例:

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

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

上記の設定を使用すると、背景画像だけでは不十分なことがよくあります。繰り返さない 表示を設定すると、画像はページの左上隅にのみ表示され、他の場所には表示されません。ただし、この背景画像を中央または他の場所に表示したい場合は、background-position を使用すると便利です。画像の左上隅を基準とした相対位置を表示するには (デフォルト値は 0% 0%) を使用するため、スペースで区切られた 2 つの値で設定されます。

主な値は、left、centerright、topcenterbottom です。パーセント値を使用して相対位置を指定したり、値を使用して絶対位置を指定したりすることもできます。たとえば、50% は、位置が次の位置にあることを示します。中央、および 50 ピクセルの水平値は、画像が左上隅の領域から 50 ピクセル単位で水平に移動することを意味します。ここで特に指摘されるのは、1 であることです。値を設定するときは、値を 1 つだけ指定します。これは同等です。水平位置のみを指定し、垂直位置は自動的に 50% に設定されます。 2 設定した値が負の数値の場合、背景画像が境界を越えていることを意味します。例:

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

画像をスクロールするかどうかを制御するbackground-attachment

上記の 2 つの手順は、画像の位置決めを完了するのに役立ちますが、実行後は完全ではありません。ページにスクロール バーがある場合、背景画像がその位置に永遠に配置されることはありません。画像をその位置に永遠に配置したい場合は、ページのコンテンツとともに画像をスクロールさせることしかできません。スクロールに関しては、現時点では背景添付が役に立ちます。追加する必要があるのは、スクロール (静的) または固定 (スクロール) のいずれか 1 つだけです。

もちろん、ランダムに追加することはできません。結局のところ、スクロールがデフォルトになっており、ページのコンテンツと一緒に画像をスクロールすることはできません。例:

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

さて、上記の設定を行うと、背景がより美しくなると思いますが、コードが多すぎると読みにくくなり、エラーが発生しやすくなります。そこで、ここで私が伝えたいのは、上記のコードをすべて一緒に使用できます。つまり、上記の関連コードを背景に追加できます。

コードを背景に追加する場合は、各値の間にスペースを追加して区切ります。画像が表示されなくなるのを避けるため、背景画像の URL の後ろに背景カラー コードを置かないでください。例:

body
{
background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') 
fixed 100px 50px no-repeat
}

注: コードを使用して直接挿入する場合、正常に表示するには、次のコードを内側に挿入し、間に次のコードを挿入する必要があります。

推奨される関連ビデオ チュートリアル: css ビデオ チュートリアル

以上がWebページの背景色をCSSで制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。