CSSで背景画像の位置を指定するbackground-positionの使い方-CSSチュートリアル-php.cn

CSSで背景画像の位置を指定するbackground-positionの使い方

yulia

リリース： 2018-09-07 12:02:47

オリジナル

6131 人が閲覧しました

背景画像を使用する場合、背景画像の位置が希望どおりにならないことがよくあります。では、背景画像の位置を設定するにはどうすればよいでしょうか。 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>

ログイン後にコピー

レンダリング: