CSS の背景タグの最も包括的な概要

CSS開発では背景をよく使いますが、この記事では主にCSSの背景についてまとめています。編集者はこれが非常に優れていると考えたので、皆さんの参考になれば幸いです。

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

1. 背景色

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

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

2. 背景画像

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

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

3.background-repeat

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

4.background-attachment

scroll(デフォルト)/fixed

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

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

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

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

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

6. 背景サイズ

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

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

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

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

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

7.background-origin

背景画像

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

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

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

8. 背景クリップ

CSS3 の背景クリップ プロパティは、背景の描画領域を指定します。

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

•border-box - (デフォルト) 背景は、境界線の外側の端

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

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

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

(英語すべて W3Schools Online から移行しました)

背景オリジンと背景クリップに関しては、それぞれ独立しており、互いに干渉しません。

背景のCSSの書き方ですが、具体的には、

backgroundで背景画像、background-colorで背景色、background-clipで背景表示領域を定義する、論理的かつ階層的であるべきだと個人的には思っています。

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

フルサイズの背景画像

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

要件は次のとおりです:

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

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

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

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

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

CSS コードをクリップボードにコピーします

html { K 背景: URL (img_flower.jpg) リピートなしの中心が修正されました
背景サイズ: COver; 波状の境界線効果を実現します。

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

関連する推奨事項:

3. css 背景添付属性の基礎入門

4. CSS の 5 つの使用方法一般的なレイアウトを実装するためのテーブル

CSS3 背景サイズ属性の詳細な紹介

以上がCSS の背景タグの最も包括的な概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。