background-position プロパティは、背景画像の開始位置を設定するために使用されます。構文は、background-position: x y です。x は水平位置を表し、y は垂直位置を表します。x と y に値を割り当てる方法は多数あります (例: 左上、3% 2%、xpos ypos)。
CSS 背景位置プロパティを使用するにはどうすればよいですか?
background-position プロパティは、背景画像の開始位置を設定できます。
構文:
background-position: x y
設定できる値:
| 値 | 説明 |
|---|---|
| 左上 左中央 左下 右上 右中央 右下 中央上 中央中央 中央下 | キーワードを 1 つだけ指定した場合、他の値は「中央」になります。 |
| x% y% | 最初の値は水平位置、2 番目の値は垂直位置です。左上隅は 0% 0% です。右下隅は 100% 100% です。値を 1 つだけ指定した場合、他の値は 50% になります。 。デフォルト値は: 0% 0% |
| xpos ypos | 最初の値は水平位置、2 番目の値は垂直位置です。左上隅が0です。単位はピクセル (0px0px) またはその他の CSS 単位です。値を 1 つだけ指定した場合、他の値は 50% になります。 % と Position を混合できます |
説明: この属性は、背景の元の画像 (background-image で定義) の位置を設定します。繰り返したい場合は、この時点から始めてください。
注: background-attachment プロパティが Firefox と Opera で適切に動作するようにするには、このプロパティを「fixed」に設定する必要があります。
css 背景位置プロパティの例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body
{
background-image:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
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>以上がCSSのbackground-positionプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
