CSS背景の使い方について

以下は、すべての 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 要素は常にブラウザ ウィンドウの高さ以上です)。次に、その背景を背景サイズ プロパティで調整します:

html {   
     background: url(img_flower.jpg) no-repeat center fixed;    
     background-size: cover;   
 }

ヒント: 波状の境界線効果を実現するには、背景画像の水平タイリングを使用します。

(現時点ではアイデアしかなく、ニーズを満たす画像はまだ見つかりません。)

以上がこの記事の全内容です。その他の関連コンテンツについては、お役に立てれば幸いです。 、PHP 中国語 Web サイトに注意してください。

関連する推奨事項:

CSS3 でハードウェア アクセラレーションを有効にする場合の使用法と落とし穴について

CSS コード仕様の記述方法について

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