css 背景位置プロパティ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css 背景位置プロパティ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:50:52

オリジナル

1624 人が閲覧しました

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

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

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

デフォルト値: 0% 0%
継承: いいえ
バージョン: CSS1
JavaScript 構文: object.style.backgroundPosition="center"
すべてのブラウザは、background-position プロパティをサポートします。

注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

可能な値
左上
中央上
右上
左中央
中央中央
右中央
左下
中央下
右下

キーワードの場合、2 番目の値は It's "center" になります。デフォルト値: 0% 0%。

x% y% 最初の値は水平位置、2 番目の値は垂直位置です。左上隅は 0% 0% です。右下隅は 100% 100% です。 1 つの値のみを指定した場合、もう 1 つの値は 50% になります。

xpos ypos 最初の値は水平位置、2 番目の値は垂直位置です。左上隅は 0 0 です。単位はピクセル (0px 0px) またはその他の CSS 単位です。 1 つの値のみを指定した場合、もう 1 つの値は 50% になります。 % と位置の値を混在させることができます。

例 1:

<html><head><style type="text/css">body{   background-image:url('/i/eg_bg_03.gif');  background-repeat:no-repeat;  background-attachment:fixed;  background-position:center;}</style></head><body><body><p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p></body></body></html>

ログイン後にコピー

例 2:

<html><head><style type="text/css">body{ background-image: url('/i/eg_bg_03.gif');background-repeat: no-repeat;background-attachment:fixed;background-position: 30% 20%; }</style></head><body><p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p></body></html>

ログイン後にコピー

例 3:

<html><head><style type="text/css">body{ background-image: url('/i/eg_bg_03.gif');background-repeat: no-repeat;background-attachment:fixed;background-position: 50px 100px;}</style></head><body><p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p></body></html>

ログイン後にコピー