CSS背景の概要紹介

すべての背景プロパティを継承することはできません。

1.background-color

すべての要素で背景色を設定できます。

background-color のデフォルト値は透明です。つまり、要素で背景色が指定されていない場合、その祖先要素の背景が見えるように背景は透明になります。

2. 背景画像

すべての要素で背景画像を設定できます。

複数の背景画像をカンマで区切って設定でき、背景画像が上に書き込まれます。

3.background-repeat

repeat (デフォルト)/no-repeat/repeat-x/repeat-y

4.background-attachment

scroll(デフォルト)/fixed

5. -position

ピクセル法: 画像の左上隅を開始点として、最初の値は水平方向の移動距離、2 番目の値は垂直方向の移動距離です (値が 1 つだけ指定されている場合)。デフォルトは 50% です。

パーセンテージ法：画像と要素の両方にパーセンテージを適用し、対応する点を一致させて位置決めします。パーセントのみを指定した場合は、垂直方向が 50% であることを意味します。

キーワード メソッド: 結合された位置の場合は上、右、下、左、中央。値が 1 つだけ指定されている場合、2 番目の値はデフォルトで中央になります。

注:background-position は負の値になる場合があります。

デフォルトでは、背景色は境界線の下まで広がり、背景画像はパディング領域の左上隅にあります。

6. 背景サイズ

背景画像のサイズを設定します。デフォルト値は自動です。

ピクセルメソッド: 最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つしかない場合、2 番目の値は auto です。

パーセント法: 親要素の幅と高さに基づいて計算されます。

キーワード cover は画像の縦横比を変更せず、要素全体を水平方向と垂直方向の両方にカバーするため、画像の一部がオーバーフローする可能性があります。

キーワード contains は画像のアスペクト比を変更せず、要素全体が一方向にカバーされるまで可能な限り画像を引き伸ばします。その結果、他の方向がカバーされなくなる可能性があります。

7.background-origin

は、背景画像

border-boxの初期位置、境界線の左上隅を定義します。

パディングボックス、パディング領域の左上隅。

コンテンツ ボックス、コンテンツ領域の左上隅。

8.background-clip

CSS3のbackground-clipプロパティは背景のペイント領域を指定します。

このプロパティは3つの異なる値を取ります:

•border-box - (デフォルト)背景がペイントされます。境界線の外側の端まで

•padding-box - 背景はパディングの外側の端まで描画されます

•content-box - 背景はコンテンツボックス内に描画されます

(英語の説明の方がわかりやすいです)

(英語はすべてW3Schools Onlineから移植しています)

background-originとbackground-clipに関しては、それぞれ独立しており、相互に干渉することはありません。

背景の CSS 記述方法については、

明確に論理的かつ階層的であるべきだと個人的には考えています; 具体的には、

background は背景画像を定義し、background-color は背景色を定義し、background-clip は背景を定義します。表示領域。

(個人的な意見、参考のみ)

フルサイズの背景画像

Webサイト上で常にブラウザウィンドウ全体をカバーする背景画像を表示したい場合。

要件は次のとおりです:

• ページ全体を画像で埋めます (空白は入れません)

• 必要に応じて画像を拡大縮小します

• 画像をページの中央に配置します

• スクロールバーを発生させないでください

次の例は、方法を示していますHTML 要素を使用します (HTML 要素は常にブラウザ ウィンドウの高さ以上です)。次に、背景を背景サイズ プロパティで調整します。

ヒント:

波状の境界線効果を実現するには、背景画像の水平タイリングを使用します。 (現時点ではアイデアしかなく、ニーズを満たす画像が見つかりません。) 上記の CSS 背景のまとめは、編集者が共有したすべての内容であり、参考になれば幸いです。皆様もPHP中国語ネットを応援していただければ幸いです。

CSS 背景の概要紹介と関連記事の詳細については、PHP 中国語 Web サイトに注目してください。