客服热线:

WEB前端教程:雪碧图和滑动门

2019-04-22 22:02:13浏览:2 评论:0 来源:招生宝   
核心摘要:CSS Sprite原理:其实就是把网页中的一些背景图片整合到一张图片文件中,再利用CSS的background-image、background-repeat、back

CSS Sprite原理:

其实就是把网页中的一些背景图片整合到一张图片文件中,再利用CSS的background-image、background-repeat、background-position属性,对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprite优点:

1. 利用CSS Sprite能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

2. CSS sprite能减少图片的字节,(网络传输以字节为单位 ,1MB=1024千字节),三张图片大小的总合大于拼成一张图片的大小。

3. 解决了命名困扰,只需要对一张图片命名,而非数十个小图片命名

用一句话来概述就是

“CSS Sprites(图片整合技术) 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。”

如何使用雪碧生成工具

1.用PS把需要的图切出来

2.打开CssSprite.exe文件

下载地址:http://download.csdn.net/detail/wx247919365/8641795

3.点击左上角按钮打开图片

4.排列图片

可以点击按钮来排列 ,也可以自己拖动排列,拖动完程序会根据图片的位置生成面积最小的雪碧图

5.是否是手机端

勾选后雪碧图的大小会缩小2倍

6.代码生成

有sass和css两个选项,选择后者。sass是一种CSS预处理语言,能清晰的、结构化的描述文件样式。

7.大图类型要选择png,图片背景色为Transparent透明


(责任编辑:小编)
下一篇: 暂无
上一篇:

WEB前端教程:CSS3媒体查询、CSS3多列布局

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们
 
0相关评论