天天看點

關于使用background-position來控制圖檔的某部分展示到頁面上方法

1.background-position的值為兩個數,其中分别是x和y的距離,表示一個html标簽盒子中其中的某個位置(以目前html元素的左上角為原點,右邊為x軸正向,下邊為y軸正向)

2.一張背景圖檔預設是在html标簽的左上角原點處開始展示的

3.此時我們需要把一張超級大圖的一部分展示到html标簽中時,我們需要測量出我們要取的那部分圖的左邊和上邊距離我們的html标簽盒子的左上方距離為多大,

4.如果看圖軟體展示出的圖檔大小和圖檔實際尺寸的大小一緻的話,那麼我們可以直接将此量出的大小取負放到background-position中作為其值就可以了。

5.如果看圖軟體展示出的圖檔大小和圖檔實際尺寸的大小不一緻的話,那麼我們需要先對其大小進行轉換,(雖然大小不一樣,但是所占比例卻是一樣的,是以我們可以通過比例轉換來解決這個問題,求得真實的距離,)然後取負放到background-position中作為其值就可以了