推广 热搜: WEB前端教程  雅思培训班  雅思培训 

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

   日期:2019-04-22     浏览:194    
核心提示: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前端教程
打赏
 
更多>同类资讯

推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备19057289号-9