ホームページ >ウェブフロントエンド >CSSチュートリアル >背景位置プロパティの使用方法
背景位置プロパティの使用方法
- 青灯夜游オリジナル
- 2019-02-18 14:08:3322655ブラウズ
background-position 属性は、背景画像の開始位置を設定するために使用されます。この属性を使用するための構文は「background-position: x y;」です。ここで、パラメーター x は水平位置を表し、y は表します。垂直位置。
CSS 背景位置プロパティ
関数: 背景画像の開始位置を設定します。
説明: background-position 属性は、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この位置から開始されます。 。
文法:
background-position: x y；x は水平位置を表し、y は垂直位置を表します。x と y に値を割り当てる方法はたくさんあります。 x と y の可能な値を見てください。 値:
| Description | |
|---|---|
| 左中央 左下 右上##右中央##右下##中央上##中央中央##中央下 1つだけの場合キーワードが指定されている場合、他の値は「center」になります x% y% | 最初の値は水平位置、2 番目の値は垂直位置です位置。左上隅は 0% 0% です。右下隅は 100% 100% です。値を 1 つだけ指定した場合、他の値は 50% になります。 。デフォルト値は: 0% 0%|
| 最初の値は水平位置、2 番目の値は垂直位置です。左上隅が0です。単位はピクセル (0px0px) またはその他の CSS 単位です。値を 1 つだけ指定した場合、他の値は 50% になります。 % と Position を混在させることができます | |
| 注: このプロパティが Firefox と Opera で正しく動作するには、background-attachment プロパティを「fixed」に設定する必要があります。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center 50px;
}
</style>
</head>
<body>
</body>
</html>レンダリング:
以上がこの記事の全内容ですが、皆様の学習のお役に立てれば幸いです。
以上が背景位置プロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。