ホームページ > 記事 > ウェブフロントエンド > 背景位置プロパティの使用方法
#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。 background-position プロパティは、背景画像の開始位置を設定するために使用されます。以下の記事でbackground-positionプロパティについて紹介していますので、ご参考になれば幸いです。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 サイトの他の関連記事を参照してください。