雪碧图的使用和制作技巧

发布时间:2020-11-19 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了雪碧图的使用和制作技巧编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>雪碧图的使用和制作技巧</ 6         style type="text/css" 7         .Sprite{
 8         width: 48px;
 9         height 53px10         background url(images/zwdzjs.jpg)11         background-position 0 -125px12         }
13         style14     15     body16     div class="Sprite"></div17     18 >

总结

以上是编程之家为你收集整理的雪碧图的使用和制作技巧全部内容,希望文章能够帮你解决雪碧图的使用和制作技巧所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478