CSS3 の背景レビュー_html/css_WEB-ITnose

1. 背景の5つの基本属性
background-color (背景色)
background-image (背景画像)
background-repeat (背景画像の表示方法)
background-attachment (背景画像が固定か回転か) )
background-position (背景画像の位置)
包括的な用途: background:[][][][][< ; 背景位置>]

2.背景色属性
構文: 背景色:透明 || <色>
透明: 透明色
色: 色の名前、RGB カラー、HLS 値、RGBA カラー、hsla 値

3. 背景画像属性
構文:background-image:none || 絶対アドレス

4. 背景繰り返し属性

構文:background-repeat:repeat || | no-repeat

repeat: 背景画像は X 軸と Y 軸に沿って並べられます
repeat-x: 背景画像は X 軸方向に沿って並べられます
repeat-y: 背景画像は X 軸方向に沿って並べられます。 Y 軸方向。
no-repeat: 背景画像は並べられません。scroll: 背景画像はページの残りの部分と一緒にスクロールします。
fixed: 背景画像は固定されます。
注: 値が固定されている場合、HTML または body タグで使用され、固定効果を実現するために他のタグで使用することはできません

6.background-position 属性

構文:background-position:[percentage] || [length]左 | 中央 | 右] || [上 | 中央 | 下]
デフォルト値: (0%, 0%) )、値は特定のパーセンテージまたは数値設定 (負の値も可) にすることも、キーワード left、center、Top、right、top、bottom を一緒に設定して使用することもでき、各属性の配置方法は次のとおりです:

7. CSS3の新しい属性

background-origin: 背景画像の描画開始点を指定
background-clip: 背景画像の表示範囲を指定
background -size: 背景画像のサイズを指定
background -break: インライン要素の背景画像をタイル状に並べるときのループ方法を指定します

8. CSS3 背景原点属性:background-origin

機能:background-position 属性を変更するために使用します 基準原点、デフォルトの開始点は左上隅

古い構文形式:background-origin:padding || border || content
新しい構文形式:background-origin:padding-box || content-box
注: IE9 以降、Firefox4 以降、Chrome4 以降Safari3以降、Opera10.5以降はすべて新しい構文形式をサポートしています
3つの属性値があります:padding-box、border-box、content-box
padding-box (padding): デフォルト値、背景を決定します - -positionの開始位置パディングの外端(ボーダーの内端)から背景画像を表示します

border-box(border): ボーダーの外端から背景画像を表示するbackground-positionの開始位置を決定します

content-box(content ): コンテンツの外端 (パディングの内端) から始まる背景画像を表示するために、background-position の開始位置を決定します
注: IE8 および以下はボーダーであり、背景画像の背景位置はボーダーから始まる背景を表示します 画像
ブラウザ互換性:





9. CSS3 背景クリッピング属性: 背景クリップ、2 番目の新しい属性が定義に追加されます。背景画像のクリッピング領域。 background-origin 属性と同様に、受け入れられる値は次のとおりです:
padding-box (背景はパディングの外縁まで広がりますが、境界線の範囲を超えません)
border-box (背景画像はボーダーの下、これもbackground-clip デフォルト値)

content-box (背景はコンテンツ領域にのみ描画され、パディングとボーダーの範囲を超えません)

構文:background-clip:border-box || padding-box || content-box

border-box: デフォルト値、要素の背景画像は要素の境界領域から外側に切り取られます。つまり、要素の境界線の外側の背景画像が切り取られます。背景画像はパディング領域から外側にトリミングされます。つまり、要素のパディング領域の外側にある背景がトリミングされます。

content-box: 要素の背景画像がコンテンツ領域から外側に、つまり外側にある背景画像がトリミングされます。要素のコンテンツ領域は切り取られます

注: HTML では、要素の背景は要素のコンテンツ (コンテンツ) で構成されることが多く、内部パディング、境界線、外部パディングの 4 つの部分で構成されます

10.



背景クリップと背景原点については、実際にはほとんど役に立たないことがわかりました。おそらく、知識を深めていくと、最も重要な洞察が得られるでしょう。アイデアが異なれば、どの属性の使用範囲を明確にするかは、段階的にしかわかりません

11.

size 属性を使用すると、背景画像のサイズを指定したり、水平方向と垂直方向の両方で背景画像のスケーリングを制御したり、背景領域をカバーするために画像を拡大する方法を制御したり、背景画像をキャプチャしたりすることもできます。背景画像は要素ボックスのサイズに適応することができ、モジュール サイズに完全に適応した背景画像を実現し、実際の作業では、異なるブロック サイズに起因する異なる背景画像を設計する必要がなくなります。サイズ

構文: 背景 -size:auto || || contains
auto: デフォルト値、背景画像のサイズが維持されます
特定の整数値 (px 値) を取得すると、背景画像のサイズが変更されます
: 値はパーセンテージであり、0% ～ 100% の範囲で指定できます。このとき、背景画像のサイズも変更されますが、この値は背景画像の幅ではなく、要素の幅に対して相対的に計算されます。 カバー: 背景画像をコンテナ全体に合わせて拡大します。ただし、この方法では背景画像が歪んでしまいます
含まれる内容: 背景画像の幅と高さの比率を維持し、定義された背景コンテナの領域に正確に適合する幅または高さに背景画像を拡大縮小します

値が と の場合、最初の値は幅、2 番目の値は高さで、2 番目の値は auto に設定するのと同じです。背景画像の高さが比例して拡大縮小されること

cover PK contains:

最初の画像はカバー、2 番目の画像は contains 結果: カバーはコンテナが満足していること、つまりコンテナが主に満足していることを反映しています。

ブラウザの互換性:

12. インライン要素の背景画像タイリング サイクル モードの背景ブレーク属性

は、インライン要素の背景画像タイリングを定義するために使用されます。 cycle メソッドは、bounding-box、each-box、Continuous の 3 つの属性値を持ち、それぞれ 3 つのタイリング ループ メソッドを表します。残念ながら、この属性は現在 [-moz-background-inline-policy] として記述されている FireFox とのみ互換性があります
bounding-box: 背景画像はインライン要素全体に並べて表示されます
each-box: 背景画像はインラインで並べて表示されます
連続: 次の行の背景画像は、前の行の画像の直後にタイルされ続けます。この属性の互換性は、絶対にサポートされるかどうかをテストするのが最善です。用途に応じて自分で確認することをお勧めします

13. CSS3 の複数の背景属性

CSS3 で複数の背景を実現するには、複数のコンテナーが必要です。コンテナが 1 つだけ必要な場合は、CSS の背景画像または背景属性で使用する必要があるすべての背景画像をカンマで区切ってリストします。各画像には、位置決め、繰り返しの設定、背景画像のサイズ変更、および個別に制御できるその他の機能などの背景の属性があります

構文とパラメーター:background-(position||repeat||clip|| origin||attachment) 属性、隣接する背景はカンマで区切る必要があります。
特定の構文: [background-position][/bckground-size] | [background-attachment ] | [background-clip] | [background-origin], *
上記の略語を次の形式に分解することもできます:
background-image:url1, url2, url3, url4,..., urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position:position1,position2,...,positionN;
background-size:size1,size2,...sizeN;
background-attachment:attachment1,attachment2, .. .,attachmentN;
background-clip:clip1,clip2,...,clipN;
background-origin:origin1,origin2,...,originN;
background-color:color;
注: 背景色を除く (あなた要素に複数の背景画像がある場合、他の属性は複数の属性値を設定できます。複数の属性値の間にはカンマを使用する必要があります。複数の背景画像では、カンマを使用する必要があります。最初に宣言した背景画像が最上層に、最後に指定した背景画像が最下層になります
CSS2の複数の背景では、1つ目は複数のコンテナを使用するもの、2つ目は複数の画像を1つの画像に結合するものです
複数の背景画像の互換性:



CSS3 マルチ背景の基本的な背景プロパティに接頭辞を付ける必要はありませんが、background-sizebackground-clipbackground-origin を使用する場合は、ブラウザ接頭辞を追加する必要があります