雪碧圖的使用和製作技巧
阿新 • • 發佈：2020-11-02
background-position背景定位：
- background-position屬性設定背景影象的起始位置;
- xpos ypos第一個值是水平位置,第二個值是垂直。左上角是0。單位可以是長度值px,關鍵字和百分數值;
- 關鍵字成對出現 left right top bottom center,如果僅指定一個關鍵字,其他值將會是"center";
- x% y%第一個值是水平位置,第二個值是垂直。左上角是0% 0%。右下角是100% 100%。如果僅指定了一個值,其他值將是50%。預設值為:0% 0%;
- inherit指定 background-position屬性設定應該從父元素繼承;
Tip:雪碧圖的使用技巧:background-position:X軸 y軸;雪碧圖的座標主要是負值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>雪碧圖的使用和製作技巧</title> 6 <style type="text/css"> 7 .Sprite{ 8 width: 48px; 9 height: 53px; 10 background: url(images/zwdzjs.jpg); 11 background-position: 0 -125px; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="Sprite"></div> 17 </body> 18 </html>