ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで背景画像の位置を指定するbackground-positionの使い方
CSSで背景画像の位置を指定するbackground-positionの使い方
- yuliaオリジナル
- 2018-09-07 12:02:476211ブラウズ
背景画像を使用する場合、背景画像の位置が希望どおりにならないことがよくあります。では、背景画像の位置を設定するにはどうすればよいでしょうか。 CSSで背景画像の位置を指定するbackground-positionの使い方を紹介します。
背景画像の背景画像位置属性では、要素の背景画像の位置を制御するためにbackground-positionが使用されます。 3 つの値を受け入れます:
キーワード: 上、右、下、左、中央など
長さの値: px、em、rem など
パーセンテージ値: %
一般的に最もよく使用される値、または最も理解されている値value キーワードと長さの値です。最も一般的に使用されるパーセンテージは 0%、50%、および 100% です。
背景画像の位置属性には通常 2 つの属性値があり、最初の属性値は X 軸を表し、2 番目の属性値は Y 軸を表します。背景画像の開始位置を定義するには、開始位置が両方向で同じである場合、値を使用できます。
一部の属性値の意味は次のとおりです:
top: 背景画像の初期位置は要素の先頭です
center: 背景画像の開始位置は要素の中央
左: 背景画像の開始位置は要素の左側です 側面
右: 背景画像の開始位置は要素の右側
下: 開始位置背景画像の位置は要素の下部です
例: 背景画像の位置を左と下に設定し、背景画像がタイル化されないことを定義します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;border:1px solid #ccc;background: url(img/gift2x.png) no-repeat left bottom;}
</style>
</head>
<body>
<div></div>
</body>
</html>レンダリング:
上記は背景位置の簡単な紹介です。お役に立てれば幸いです。
以上がCSSで背景画像の位置を指定するbackground-positionの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。