ホームページ > 記事 > ウェブフロントエンド > css 背景位置プロパティ_html/css_WEB-ITnose
css 背景位置プロパティ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:50:521640ブラウズ
background-position プロパティは、背景画像の開始位置を設定します。
この属性は、元の背景画像 (background-image で定義) の位置を設定します。背景画像が繰り返される場合は、この点から開始されます。
ヒント: このプロパティが Firefox と Opera で適切に動作するようにするには、background-attachment プロパティを「fixed」に設定する必要があります。
デフォルト値: 0% 0%
継承: いいえ
バージョン: CSS1
JavaScript 構文: object.style.backgroundPosition="center"
すべてのブラウザは、background-position プロパティをサポートします。
注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。
可能な値
左上
中央上
右上
左中央
中央中央
右中央
左下
中央下
右下
x% y% 最初の値は水平位置、2 番目の値は垂直位置です。左上隅は 0% 0% です。右下隅は 100% 100% です。 1 つの値のみを指定した場合、もう 1 つの値は 50% になります。
xpos ypos 最初の値は水平位置、2 番目の値は垂直位置です。左上隅は 0 0 です。単位はピクセル (0px 0px) またはその他の CSS 単位です。 1 つの値のみを指定した場合、もう 1 つの値は 50% になります。 % と位置の値を混在させることができます。
<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>