关闭显示 重要通知: 高防母机5人合租计划 每份4G内存 【高配】、【站群】香港、美国服务器租用促销 Com短促一次买4个40元首年单个45元
当前位置: 主页 > 帮助中心 > 网络教程 > CSS教程 >

CSS Sprites简介以及优缺点

时间:2018-04-19 20:17来源:港网整理 作者:港网整理 点击:
阿里妈妈UED谈CSS Sprites技术.

CSS Sprites简介

通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。

说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

CSS Sprites应用

在这方面,淘宝网做的比较好,我就以淘宝网为例吧。

实例一:淘宝频道页面导航

效果图:


点击放大

sprites图:

   
   

上一页12 下一页 阅读全文
(责任编辑:港网科技)
------分隔线----------------------------
    下一篇:没有了
推荐内容
Top

客 服 热 线

0763-3339822

您好,港网科技采取QQ热线,如果QQ没回复才,请拨此号码, 其他问题请提交工单或在上班时间联系,谢谢支持!