CSS の深い理解background_html/css_WEB-ITnose

カタログ[1]背景色[2]背景画像[3]背景タイリング[4]背景位置[5]背景関連付け[6]背景原点[7]背景トリミング[8]背景サイズ[9]合成背景

前に言った事

背景はフォントと同様に複合属性であり、非常に頻繁に使用される属性です。 CSS3 では、background プロパティは以前の使用法を維持しながら、新しい関連プロパティを追加します。この記事では、背景に関する知識を詳しく紹介します

background-color 背景色

背景色はすべての法定色を受け入れ、背景を透明にするキーワードも受け入れることができます。カラー設定についてはこちらをご覧ください。背景色は継承できません。デフォルト値は透明です。要素に指定された色がない場合は、その祖先要素の背景が見えるように背景を透明にする必要があります。 & 値: & gt; 透明

継承: いいえ

画像

背景画像が配置されます指定した背景色の上に配置します。ただし、PNG などのアルファ チャネルを含む画像形式は部分的または完全に透明になる場合があり、そのため画像が背景色と混ざってしまいます。さらに、何らかの理由で画像を読み込めない場合、背景色が画像を置き換えます

値:

background-repeat 背景タイル

背景画像は、デフォルトでは要素の左上隅ですが、境界領域を含むすべての方向から外側にタイル表示されます。背景タイルの属性値のうち、spaceとroundはCSS3での新しい値です。 space は、背景画像の 2 つの端が整列して並べられ、余分なスペースが空白スペースに置き換えられることを意味します。round は、背景画像の 2 つの端が整列して並べられますが、余分なスペースはそれ自体を引き伸ばすことによって埋められることも意味します。

[注] space とround これらの 2 つの新しい属性値は、Firefox、safari、IE9 ブラウザではサポートされていません

[注] 背景タイルには、横軸の値と縦軸の値を表す、スペースで区切られた 2 つの値を書き込むことができますそれぞれ軸の値を指定しますが、この書き方はIE8-ブラウザでは対応していません。背景-repeatとして記述されます:repeat no-repeat

値:repeat |repeat-y | no-repeat

適用対象:すべての要素

継承 :なし

background-position 背景の位置

値: [] | ] || [[左 | 中央 | 右]] | 継承

適用対象: すべての要素

: 要素と元画像の対応点を基準とした相対位置

【書き込み】

【1】キーワード

x(横方向):

左: 画像の左側を画像の左側に揃えます。 element

center:画像 画像の中央が要素の中央に揃えられます

right:画像の右側が要素の右側に揃えられます

y(縦方向):

top:画像の上部が要素の上部に揃えられます

center: 画像の中央が要素の中央に揃えられます

bottom: 画像の下部が要素の下部に揃えられます

[注】単一キーワード: ある方向のキーワードが中央の場合は省略可能

[2] 特定の値

x(横方向):

正の値は左から右に移動し、負の値は左から右に移動します右から左に移動

y(縦方向):

正の値は上から下に移動、負の値は下から上に移動

【注意】ページの左上隅が原点(0,0)点

【注意】背景画像のうち要素範囲外に移動した部分は表示されません

【3】パーセント

x%（横方向）:

x% of背景画像は要素の x% に対応します

y% (垂直方向):

背景画像の Y% は要素の y% に対応します

[注意] 値を 1 つだけ記述すると、もう 1 つの値はbe 50%

background-attachment 背景関連付け

値: スクロール | 固定 | 継承

初期値: スクロール

適用対象: すべての要素

継承: なし

スクロール: 背景画像は、ページの残りの部分はスクロールされます。ただし、スクロール可能な要素の場合、要素コンテンツのスクロールに合わせて背景画像はスクロールしません(デフォルト値)

修正: 元の画像はドキュメントと一緒にスクロールせず、元の画像の配置は、画像を含む要素のサイズや視覚領域内の位置ではなく、視覚領域のサイズによって決まります。ブラウザでは、ユーザーがブラウザ ウィンドウのサイズを変更すると、表示可能な領域が変化する場合があります。これにより、ウィンドウ サイズの変更に応じて背景の元の画像が移動します。つまり、ある意味、画像は固定されておらず、表示可能領域のサイズを変更せずに固定されたままになっているだけです

[注意] IE6-browserは非body要素の固定関係を処理できません

local:background 画像は、ページの残りの部分はスクロールします。ただし、それ自体がスクロール可能な要素の場合、要素コンテンツのスクロールに合わせて背景画像もスクロールします

【注意】ローカル属性値 IE8-browser は、

background-origin 背景原点 (IE8-browser Notサポートされています)

背景原点属性は、主に背景位置属性の基準原点、つまり背景画像の位置を決定するための開始点を決定するために使用されます。デフォルトでは、背景画像の背景配置属性は常に要素の左上隅を座標原点として背景画像を配置します。背景原点属性は、必要に応じて背景画像の背景配置の開始位置を変更できます

background-origin: padding-box || content-box

padding-box: デフォルト値、背景を決定しますPositioning 開始位置は、パディングの外端から背景画像を表示します

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

content-box: 開始位置を決定します背景の位置 コンテンツの外縁からの配置 背景画像の表示開始

[注意]background-attachment が固定に設定されている場合、background-origin は無効になります

background-clip 背景クリッピング ( IE8-ブラウザはサポートしておりません）

背景のクリッピング Cut プロパティは、背景画像のトリミング領域を定義するために使用されます。背景のオリジンのプロパティに似ています

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

text属性はwebkitカーネルでサポートされています

-webkit-background-clip: text;

-webkit-text-fill-color:transparent; 属性を使用すると、テキストの色を背景画像として表示できます

background-size 背景サイズ (IE8 ブラウザはサポートしていません)

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

背景サイズの特徴は次のとおりです用途: 流体レイアウトまたはレスポンシブ レイアウトでは、背景画像が常にコンテナのサイズに適合するようにします。タイル状の繰り返し背景画像の場合は、背景画像が切り捨てられる効果がないことを確認します。マルチカラム効果; Retina を解決する 画面に 2 つのピクセルがある場合の背景画像のぼやけの問題を解決します

背景サイズ属性が固定値またはパーセント値の場合、リンクまたはリスト要素を使用して背景画像を拡大縮小できます。 2 つの値または 1 つの値を設定できます。値を 1 つだけ指定した場合、背景画像の幅が指定され、2 番目の値は高さを指定する auto と同等になります。この場合、auto 値を設定した後、背景画像の高さを比率に応じて自動的に拡大縮小することができます。

auto : デフォルト値、背景画像の元の高さと幅が維持されます

: 特定の整数値を取得します

: 幅と背景画像の合計に対して相対的に計算されたパーセンテージを取得します要素のパディング

Cover: 背景画像をコンテナ全体に合わせて拡大します。ただし、この方法では背景画像が歪んでしまいます。多くの場合、background-position: center と組み合わせて使用​​され、全画面の背景効果を作成します。欠点は、十分な大きさの背景画像を作成する必要があることです。そうしないと、解像度の高いブラウザでは背景画像が歪んでしまいます。

内容: 背景画像自体の幅の比率を維持し、背景画像を幅に合わせて拡大縮小します。または定義に合わせて高さを設定します 背景コンテナの領域

background 複数の背景 (IE8-ブラウザはサポートしていません)

CSS3を使用する前は、各コンテナは背景画像を1つだけ指定できるため、背景画像がを追加する必要があります。それを保持するには少なくとも 1 つのコンテナを追加する必要があります。疑似要素を使用して追加の画像を表示することは、実際には HTML タグをネストして複数の背景画像を変換することです。:after や :before などの疑似要素を使用して追加の要素を生成して背景画像を配置することは、HTML タグを直接ネストするよりも表面的にはきれいですが、実際には、スープを変えるのは問題ですが、薬を変えるのは問題ではありません

CSS3 の複数の背景属性を使用すると、HTML マークアップを変更する必要はありません。CSS の背景画像または背景属性で使用する必要があるすべての背景画像をカンマで区切ってリストします。そしてそれぞれの画像にはbackground属性が付いています

CSS3では複数の背景をレイヤーに分け、ブラウザで表示する際の画像の重ね順に従って上から下に指定します。最初に宣言した背景画像が一番上になります。 、そして最後 指定された背景画像は一番下に配置されます

要素に複数の背景画像がある場合、背景色に加えて、他の属性も複数の属性値に設定できます

そうでないブラウザの場合複数の背景との互換性 たとえば、単一の背景属性の後に複数の背景属性を記述し、この単一の背景画像が実際に使用可能であることも確認します。これは CSS3 のマルチ背景機能の互換性を扱うための一般的な解決策です

背景: [background-color] [background-position] [background-repeat] | -attachment ] | [background-origin],*

[注意]background-originとbackground-clipに値が1つしかない場合、値はbackground-clipになります。そして、前が背景元、後ろが背景クリップです