css中背景定位的方法

1、單詞表示法，表示圖片與盒子背景區域進行對應方向的對齊。

水平方向可選單詞：left、center、right

垂直方向可選單詞：top、center、bottom

2、畫素表示法，畫素值區分正負，正數表示圖片針對盒子的原點向右、向下移動。

第一個屬性值：畫素是幾，表示背景圖片左上角針對 border 以內的左上頂點水平方向位移的距離。

第二個屬性值：畫素是幾，表示背景圖片左上角針對 border 以內的左上頂點垂直方向位移的距離。

注： 負數表示圖片針對盒子的原點向左、向上移動。

可以利用屬性值為負數，製作在小盒子中顯示大的背景圖的一部分。 使用 fireworks軟體量取尺寸，讀取資料。可用於精靈圖。

第一步：在設計圖中，使用切片工具製作一個想要顯示區域大小的切片，讓切片左上頂點位於想要載入的背景部分。

第二步：讀取屬性欄的切片資料，其中寬、高就是要載入的盒子的寬高，x 和 y 的數值表示移動的距離的絕對值，直接將數值加負號賦值給背景定位屬性。

3、百分比表示法，100%代表的數值。

水平方向，等價於盒子的border以內的背景區域寬度減去圖片的寬度。

垂直方向，等價於盒子的border以內的背景區域高度減去圖片的高度。

以上就是css中背景定位的方法，希望對大家有所幫助。更多css學習指路：

本文轉載於掘金，如有侵犯聯絡作者修改。