他の人の作品から抜粋~~~ とても良いものです 文法:
背景位置: 長さ ||
背景位置: 位置 || 位置
値:
length : パーセント | 浮動小数点数と単位識別子で構成される長さの値。
位置: 上 | 左 | 中央
|
オブジェクトの背景画像の位置を設定または取得します。最初に、background-image 属性を指定する必要があります。このプロパティの位置は、オブジェクトのパディング設定の影響を受けません。
デフォルト値は 0% 0% です。このとき、背景画像はパディングを除いたオブジェクトのコンテンツ領域の左上隅に配置されます。
値が 1 つだけ指定されている場合は、その値が横軸に使用されます。縦軸はデフォルトで 50% になります。 2 つの値が指定された場合、2 番目の値が縦軸に使用されます。
設定値が右中央の場合、横軸の値が中央の値を上書きするため、背景画像が右側に配置されます。
対応するスクリプト プロパティは、backgroundPosition です。
背景位置 --
背景画像の位置の値を定義します。
[<パーセンテージ> | <長さ> | <パーセンテージ> | <長さ> |
* レベル
左：左
センター：ミディアム
右：そうです
* 垂直
上：オン
センター：ミディアム
下：次へ
※縦と横の組み合わせ
x-% y-%
x-pos y-pos
初期値：0% 0%
継承: いいえ
適用対象: すべての要素
背景: 背景.位置: 位置 ***************************** 説明する重要なポイント: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<頭>
<title>背景位置の配置の問題</title>
<style type="text/css">
<!--
*{
マージン:0;
パディング:0;
}
体 {
テキスト整列:中央;
背景:#000;
}
＃容器{
幅:1000ピクセル;
マージン:0 自動;
背景:#fff url(images/bg.jpg) 左上、繰り返しなし;
高さ:500ピクセル;
}
-->
</スタイル>
</head>
<本文>
<div id="コンテナ"> </div>
</body>
</html>1.background-position:left top; (図 1 を参照) 背景画像の左上隅がコンテナー (container) の左上隅に揃えられ、余分な部分は非表示になります。背景位置:0,0 と同等; 背景位置:0%,0%;2.背景位置:右下; とも同等です (図 2 を参照)。背景画像の右下隅をコンテナの右下隅に合わせて、余分な部分を非表示にします。背景位置と同等: 100%、100%; 背景位置と同等: コンテナの幅 (コンテナ) - 背景画像の幅、コンテナの高さ (コンテナ) - 背景画像の高さ3. 背景位置: 500px 15px ;(図 3 を参照)。背景画像はコンテナの左上隅から右に500px、下に15px移動し、余分な部分は非表示になります。 4.背景位置:-500px -15px (図 4 を参照)。背景画像をコンテナの左上隅から左に500px、上に15px移動し、余分な部分を非表示にします。 5.背景位置:50% 50% (図 5 を参照)。左に相当: {コンテナの幅 - 背景画像の幅}*左のパーセント、余分な部分は非表示になります。右に相当: {コンテナの高さ(コンテナ) - 背景画像の高さ}*右の割合、余分な部分は非表示になります。例: 背景位置:50% 50%; つまり、背景位置: (1000-2000)*50%px、(500-30)*50%px、つまり背景位置:-500px、235px ; つまり、背景画像です。コンテナの左上隅から左に 500 ピクセル、下に 235 ピクセル移動します。 (この場合、効果を確認するには、背景画像を bg2.jpg にする必要があります。bg.jpg の高さ)小さすぎると効果が明らかではありません) 背景位置:-50% -50% (図 6 を参照)。 left: -{{コンテナ（コンテナ）の幅 - 背景画像の幅}*left パーセント（パーセントはすべて正の値）}に相当し、余分な部分は非表示になります。右: -{{コンテナ(コンテナ)の高さ - 背景画像の高さ}*右の割合(割合はすべて正の値)}に相当し、余分な部分は非表示になります。例: 背景位置:-50% -50%; は背景位置:-{(1000-500)*50%} ピクセル、-{(500-360)*50%} ピクセルです。 - 250px、-70px; つまり、背景画像はコンテナの左上隅から左に 250 ピクセル、上に 70 ピクセル移動します。