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 コードをクリップボードにコピーします
(現時点ではアイデアしかありませんが、ニーズを満たす画像がまだ見つかりません。)
以上がCSS の背景タグの最も包括的な概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
