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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 24, 2016 am 11:50 AM

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:

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

ログイン後にコピー

例 2:

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

ログイン後にコピー

例 3:

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

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。