关于 CSS精灵(CSS spri…
2014-02-10 11:29
381 查看
CSS sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。 技术优点: 利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能。 方便图片资源的管理,节省空间。 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变 。 技术实现 : CSS精灵(CSS sprites)的理解" /> 利用一张图片显示不用部分来达到不同界面显示的效果。 定位显示图片一: CSS精灵(CSS sprites)的理解" /> 定位显示图片二 CSS精灵(CSS sprites)的理解" /> 实现代码: http://www.w3.org/1999/xhtml"> #fang{ //定义CSS ID width:220px; height:220px; background:url(bg 1.jpg);//默认显示坐标为0 0d大小为220*220的图片 background-repeat:no-repeat; } #zelong{//定义CSS ID background:url(bg 1.jpg); width:220px; height:220px; background-position:-220px 0;//显示坐标为-220 0 大小为220*220的图片 background-repeat:no-repeat; } //div盒子 //div盒子 利用 CSS sprites 生成工具可以很好地生成背景图片,并获得CSS sprites 中图片坐标。 |
相关文章推荐
- VS 2005 Web Application Project & Atlas Control Toolkit & CSS Control Adapter
- 关于Struts 1或2 ActionForm接受不…
- div+css 常用三种自动适应宽度分栏
- 关于struts2 中action 属性没有 se…
- 关于A/B testing的三篇博文,…
- mysql 服务器端关于用户连接方面的…
- 关于udelay(); mdelay(); ndelay()…
- div+css 布局下兼容IE6 IE7 FF常见…
- 关于Linux 防火墙iptables的操作
- 关于Oracle Home的一点扩展
- 关于如何在startup时 使用spfile
- 关于利用Jsoup解析HTML中 ;变成非传统空格或乱码问题解决方法
- css自定义cursor(放大镜 放小镜)
- 关于现在 关于未来
- [译]关于iOS和OS X废弃的API…
- css -布局整理二
- 10个顶级的CSS UI开源框架
- 关于网卡及MAC和PHY的区别 ,ARP
- 2016-01-27 关于抽象类
- 关于__irq 的使用