CSS background-position

針對background-image的圖片位置做定位

預設値

.pic
.pic
 width: 300px
 height: 200px
 background-image: url("https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=1612ee39554e7a805abe7f7d70ccbad7&oe=58EFDD0A")
 background-position: 0 0
 //等同於
 //background-position: left top
 //從水平軸0%處(最左方)開始定位,從垂直軸0%處開始定位

Display

.

background-position關鍵字

第一個値:水平方向

  • left
  • right
  • center
  • 或是指定%數(從左方往右多少%)
 第二個値:垂直方向
  • top
  • bottom
  • center
  • 或是指定%數(從上方往下多少%)

範例:圖片水平垂直置中定位

.pic
 width: 300px
 height: 200px
 background-image: url("https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=1612ee39554e7a805abe7f7d70ccbad7&oe=58EFDD0A")
 background-position: center center
 //也可以寫成
 //background-position: 50% 50%

Display

.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *