CSS 背景位置随笔_html/css_WEB-ITnose

1. 定義と使用法

background-position プロパティは、背景画像の開始位置を設定します。

この属性は、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この点から開始されます。

ヒント: このプロパティが Firefox と Opera で適切に動作するようにするには、background-attachment プロパティを「fixed」に設定する必要があります。

デフォルト: 継承: バージョン: JavaScript 構文:

0% 0%

no

CSS1

object.style.backgroundPosition="center"

2. おそらく価値

値の説明 x% y%xpos ypos

左上 中央上 右上 左中央 中央中央 中央右 左下 中央下 下そうです	あなたが指定した場合のみキーワードは 1 つなので、2 番目の値は「center」になります。 デフォルト値: 0% 0%。
	最初の値は水平位置、2 番目の値は垂直位置です。 左上隅は 0% 0% です。右下隅は 100% 100% です。 値を 1 つだけ指定した場合、もう 1 つの値は 50% になります。
	最初の値は水平位置、2 番目の値は垂直位置です。 左上隅は 0 0 です。単位はピクセル (0px 0px) またはその他の CSS 単位です。 値を 1 つだけ指定した場合、もう 1 つの値は 50% になります。 % と位置の値を混合できます。

3. 操作例:

html+css コード:

レンダリング効果:

1.background-position:-110px -70px;の場合

レンダリング:

写真 写真 写真 写真

70px、左の位置に 110px シフトします。

2. 背景-POSITION: 10px 10px;

3.background- Position:100% 100%;

レンダリング:

画像はコンテナ要素の右下隅にあり、background-position:rightbottom; と同じ効果があります。

x: {コンテナの幅(コンテナ)?背景画像の幅}*x パーセントに相当し、余分な部分は非表示になります。つまり、右50px

は、y:{コンテナ(コンテナ)の高さ?背景画像の高さ}*yパーセントに相当し、余分な部分は非表示になります。つまり、下方向に 185px;

4.background-position:50% 50%;

レンダリング:

画像は水平方向と垂直方向の中央に配置されます。これは、background-position:center center; と同じ効果があります。

x: {コンテナの幅(コンテナ)?背景画像の幅}*x パーセントに相当し、余分な部分は非表示になります。

y: {コンテナの高さ(コンテナ)?背景画像の高さ}*yの割合に相当し、余分な部分は非表示になります。

5.background-position:-50% -50%;

Rendering:

xに相当: -{コンテナ(コンテナ)の幅?背景画像の幅}*xパーセント、余分な部分は非表示になります。つまり、25px 左に移動

は y: - {コンテナの高さ (コンテナ)? 背景画像の高さ}*y の割合に相当し、余分な部分は非表示になります。つまり、92.5px 上に移動します。

6.background-position: -100% -100%;

は x と同等です。背景画像の幅 }*x パーセント、余分な部分は非表示になります。つまり、 50px 左に移動

は y: - {コンテナの高さ (コンテナ)? 背景画像の高さ}*y の割合に相当し、余分な部分は非表示になります。つまり、185px 上に移動しました;

著作権表示: この記事はブロガーによるオリジナル記事であり、ブロガーの許可なく複製することはできません。