背景位置プロパティの使用方法-CSSチュートリアル-php.cn

背景位置プロパティの使用方法

青灯夜游

リリース： 2021-04-22 15:55:33

オリジナル

22528 人が閲覧しました

background-position 属性は、背景画像の開始位置を設定するために使用されます。この属性を使用するための構文は「background-position: x y;」です。ここで、パラメーター x は水平位置を表し、y は表します。垂直位置。

背景位置プロパティの使用方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

background-position プロパティは、背景画像の開始位置を設定するために使用されます。以下の記事でbackground-positionプロパティについて紹介していますので、ご参考になれば幸いです。

CSS 背景位置プロパティ

関数: 背景画像の開始位置を設定します。

説明: background-position 属性は、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この位置から開始されます。。

文法:

background-position: x y；

ログイン後にコピー

x は水平位置を表し、y は垂直位置を表します。x と y に値を割り当てる方法はたくさんあります。 x と y の可能な値を見てください。値:

ValueDescriptionleft上最初の値は水平位置、2 番目の値は垂直位置です位置。左上隅は 0% 0% です。右下隅は 100% 100% です。値を 1 つだけ指定した場合、他の値は 50% になります。。デフォルト値は: 0% 0%xpos ypos最初の値は水平位置、2 番目の値は垂直位置です。左上隅が0です。単位はピクセル (0px0px) またはその他の CSS 単位です。値を 1 つだけ指定した場合、他の値は 50% になります。 % と Position を混在させることができます#CSS 背景位置プロパティの使用例


左中央左下右上##右中央##右下##中央上##中央中央##中央下 1つだけの場合キーワードが指定されている場合、他の値は「center」になります x% y%

注: このプロパティが Firefox と Opera で正しく動作するには、background-attachment プロパティを「fixed」に設定する必要があります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body
{ 
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center 50px; 
}
</style>
</head>

<body>

</body>
</html>

ログイン後にコピー

レンダリング:

以上がこの記事の全内容ですが、皆様の学習のお役に立てれば幸いです。

以上が背景位置プロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。