2019獨角獸企業重金招聘Python工程師標準>>>

一、background-position賦值時的等價寫法

1、top left, left top 等價于 0% 0%.

2、top, top center, center top 等價于 50% 0%.

3、right top, top right 等價于 100% 0%.

4、left, left center, center left 等價于 0% 50%.

5、center, center center 等價于 50% 50%.

6、right, right center, center right 等價于 100% 50%.

7、bottom left, left bottom 等價于 0% 100%.

8、bottom, bottom center, center bottom 等價于 50% 100%.

9、bottom right, right bottom 等價于 100% 100%.

?

二、背景圖像定位中我們要明確的幾點

?

1、兩個值前面一個是橫向的定位，我們稱為x軸方向定位。后面一個值是縱向的定位，我們稱為y軸方向定位。

? ? 如果只有一個值，那默認的就是x軸方向，

? ? 這時y軸方向就默認的是上下居中對齊，也就是center。

?

2、坐標軸的原點就是對應容器的左頂點。

3、這個坐標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都為正。

4、x y值分別表示背景圖片的左頂點相對于坐標原點（也就是容器的左頂點）的值。

5、x y的值可以用百分比或者px來表示。

?

6、x y也可以用“left、right、top、bottom、center”這五個對齊方式來表示，

? ? 但注意：用“left、right、top、bottom、center”來表示的時候，應用的是對齊規則，而不是坐標規則。

? ? x為left是表示圖片的左邊和容器的左邊對齊，為right的時候表示圖片的右邊和容器的右邊對其，

? ? y為top的時候表示圖片的頂部和容器的頂部對齊，

? ? 為bottom時表示圖片的底部和容器的底部對齊，x y等于center的時候表示居中對齊。

?

7、x y用百分比或者px表示的時候，其值可以為負數。我們應用坐標規則就很容易理解負數表示的意義，

? ? x為負數時候表示圖片左頂點在容器左頂點的左側，

? ? y為負數時表示圖片的左頂點在容器的左定點的上方。也就是向左和向上超出容器的范圍。

?

參考資料：?background-position的使用 ?http://www.studyofnet.com/news/960.html

轉載于:https://my.oschina.net/u/2428791/blog/504857

總結

以上是生活随笔為你收集整理的CSS中background-position的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。