background-positionプロパティの使い方
4270 ワード
background:url(../images/list01.png) no-repeat 0 center; background:url(../images/bg.png) no-repeat -4px -3px; background:url(../images/list01.png) no-repeat 0 center; 画像アドレスが水平位置0を繰り返さず垂直位置が中央になる
0 centerの意味は水平位置0垂直位置が中央-4 px-3 pxという意味で水平位置-4 px垂直位置-3 pxという意味です
この2つの値はbackground-positionプロパティと同じです.すなわち、背景画像の開始位置を設定します.このアトリビュートは、バックグラウンドの元の画像の位置を設定します.バックグラウンド画像を繰り返す場合は、この点から開始します.デフォルト:0%可能な値top left top center top right center left center center right bottom left bottom center bottom right(以上、キーワードを1つだけ指定した場合、2番目の値は「center」になります.)
x%y%(1番目の値は水平位置、2番目の値は垂直位置です.左上隅は0%です.右下隅は100%です.1つの値のみを指定すると、もう1つの値は50%になります.)
mpx npx(最初の値は水平位置、2番目の値は垂直位置.左上隅は0 0.単位は画素(0 px 0 px)または他のCSS単位である.1つの値のみを指定すると、もう1つの値は50%になります.)
%とposition値を混合して使用できます.
構文:background-position:length‖length background-position:position‖position値:length:√パーセント|浮動小数点数と単位識別子からなる長さ値.長さ単位position:top|center|bottom|left|center|rightを参照
説明:オブジェクトの背景画像の位置を設定または取得します.background-imageプロパティを指定する必要があります.このプロパティの配置は、オブジェクトのパッチプロパティ(padding)設定の影響を受けません.既定値は0%です.このとき、背景画像は、パッチを含まないオブジェクトのコンテンツ領域の左上隅に配置される.値が1つしか指定されていない場合、この値は横座標に使用されます.縦座標はデフォルトで50%になります.2つの値が指定されている場合、2番目の値は縦座標に使用されます.設定値がright centerの場合、rightが横座標値としてcenter値を上書きするため、背景画像は右に配置されます.対応するスクリプトのプロパティはbackgroundPositionです.
注:本明細書で使用する画像サイズは300 px*120 pxであり、図形のどの部分が隠されているかを明確に表現するために、画像のサイズによって平均9等部に分けられている.同時に、背景画像コンテナ領域に緑色の枠線を描画し、コンテナの範囲を明確に表示します.1、background-position:0 0; 背景画像の左上隅がコンテナ要素の左上隅に揃えられます.この設定はbackground-position:left top;またはbackground-position:0%;設定の効果は一致しています.例:
効果は次の図1のようになります.
2、この属性の位置はオブジェクトのパッチ属性(padding)設定の影響を受けない.
たとえば、コンテナ要素にpadding値を追加します.背景画像の左上隅がコンテナ要素の左上隅に位置合わせされています.ここでは、コンテナ要素の高さと幅にのみ影響します.
効果は図2のようになります.
3、background-position:-70px -40px;
画像は、容器の左上隅を基準として左へ70 px、上へ40 pxシフトし、例:
効果は図3の通りです.
4、background-position:70px 40px;
画像は、容器の左上隅を基準として右へ70 px、下へ40 pxシフトし、例:
効果は図4のようになります.
5、background-position:50% 50%;
画像は水平と垂直に中央に配置されます.background-position:center center;効果は同等です.
x:{コンテナ(container)の幅-背景画像の幅}*xパーセントに等しく、超えた部分は非表示です.y:{コンテナ(container)の高さ-背景画像の高さ}*yパーセントに等しく、超えた部分は非表示です.
例:container{ width:300px; height:150px; background:transparent url(bg.jpg) no-repeat scroll 50% 50%; border:5px solid green; }
そのx＝(300−210)*50%=45 px;
y=(150-120)*50%=15px;
効果は図5のようになります.
オーバーライド部分は両端に伸びないので、まず幅が十分な幅の画像を作成して水平値を50%に設定することができます.これにより、異なるブラウザに適応し、画像の水平がブラウザウィンドウに満ち、中央になるようにすることができます.margin:50 autoの代わりに機能します.
6、background-position:-50% -50%;
x:-{コンテナ(container)の幅-背景画像の幅}*xパーセントに等しく、超えた部分は非表示です.y:-{コンテナ(container)の高さ-背景画像の高さ}*yパーセントに等しく、超えた部分は非表示です.
効果は図6のようになります.
7、background-position:100% 100%;
画像は容器要素の右下隅にあり、background-position:right bottom;効果は同等です.
例:
効果は図7のようになります.
トップ
0 centerの意味は水平位置0垂直位置が中央-4 px-3 pxという意味で水平位置-4 px垂直位置-3 pxという意味です
この2つの値はbackground-positionプロパティと同じです.すなわち、背景画像の開始位置を設定します.このアトリビュートは、バックグラウンドの元の画像の位置を設定します.バックグラウンド画像を繰り返す場合は、この点から開始します.デフォルト:0%可能な値top left top center top right center left center center right bottom left bottom center bottom right(以上、キーワードを1つだけ指定した場合、2番目の値は「center」になります.)
x%y%(1番目の値は水平位置、2番目の値は垂直位置です.左上隅は0%です.右下隅は100%です.1つの値のみを指定すると、もう1つの値は50%になります.)
mpx npx(最初の値は水平位置、2番目の値は垂直位置.左上隅は0 0.単位は画素(0 px 0 px)または他のCSS単位である.1つの値のみを指定すると、もう1つの値は50%になります.)
%とposition値を混合して使用できます.
構文:background-position:length‖length background-position:position‖position値:length:√パーセント|浮動小数点数と単位識別子からなる長さ値.長さ単位position:top|center|bottom|left|center|rightを参照
説明:オブジェクトの背景画像の位置を設定または取得します.background-imageプロパティを指定する必要があります.このプロパティの配置は、オブジェクトのパッチプロパティ(padding)設定の影響を受けません.既定値は0%です.このとき、背景画像は、パッチを含まないオブジェクトのコンテンツ領域の左上隅に配置される.値が1つしか指定されていない場合、この値は横座標に使用されます.縦座標はデフォルトで50%になります.2つの値が指定されている場合、2番目の値は縦座標に使用されます.設定値がright centerの場合、rightが横座標値としてcenter値を上書きするため、背景画像は右に配置されます.対応するスクリプトのプロパティはbackgroundPositionです.
注:本明細書で使用する画像サイズは300 px*120 pxであり、図形のどの部分が隠されているかを明確に表現するために、画像のサイズによって平均9等部に分けられている.同時に、背景画像コンテナ領域に緑色の枠線を描画し、コンテナの範囲を明確に表示します.1、background-position:0 0; 背景画像の左上隅がコンテナ要素の左上隅に揃えられます.この設定はbackground-position:left top;またはbackground-position:0%;設定の効果は一致しています.例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
}
効果は次の図1のようになります.
1
2、この属性の位置はオブジェクトのパッチ属性(padding)設定の影響を受けない.
たとえば、コンテナ要素にpadding値を追加します.背景画像の左上隅がコンテナ要素の左上隅に位置合わせされています.ここでは、コンテナ要素の高さと幅にのみ影響します.
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
padding:50px;
}
効果は図2のようになります.
2
3、background-position:-70px -40px;
画像は、容器の左上隅を基準として左へ70 px、上へ40 pxシフトし、例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
border:5px solid green;
}
効果は図3の通りです.
3
4、background-position:70px 40px;
画像は、容器の左上隅を基準として右へ70 px、下へ40 pxシフトし、例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
border:5px solid green;
}
効果は図4のようになります.
4
5、background-position:50% 50%;
画像は水平と垂直に中央に配置されます.background-position:center center;効果は同等です.
x:{コンテナ(container)の幅-背景画像の幅}*xパーセントに等しく、超えた部分は非表示です.y:{コンテナ(container)の高さ-背景画像の高さ}*yパーセントに等しく、超えた部分は非表示です.
例:container{ width:300px; height:150px; background:transparent url(bg.jpg) no-repeat scroll 50% 50%; border:5px solid green; }
そのx＝(300−210)*50%=45 px;
y=(150-120)*50%=15px;
効果は図5のようになります.
5
オーバーライド部分は両端に伸びないので、まず幅が十分な幅の画像を作成して水平値を50%に設定することができます.これにより、異なるブラウザに適応し、画像の水平がブラウザウィンドウに満ち、中央になるようにすることができます.margin:50 autoの代わりに機能します.
6、background-position:-50% -50%;
x:-{コンテナ(container)の幅-背景画像の幅}*xパーセントに等しく、超えた部分は非表示です.y:-{コンテナ(container)の高さ-背景画像の高さ}*yパーセントに等しく、超えた部分は非表示です.
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
border:5px solid green;
}
効果は図6のようになります.
6
7、background-position:100% 100%;
画像は容器要素の右下隅にあり、background-position:right bottom;効果は同等です.
例:
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
border:5px solid green;
}
効果は図7のようになります.
7
トップ