使用背景图代码
2018-06-24 00:37:50来源:未知 阅读 ()
<button class="u-btn">点我</button>
.u-btn{background: url(images/btn.png) no-repeat 0 0 ;} .u-btn{background: url(images/sprite.png) no-repeat 0 -50px;}
图片合并方案
什么是Sprite拼图:
Sprite拼图好处:
减少网络请求,提升网页加载速度
图片优化合并
平衡与取舍
压缩工具
- 无损 Minimage
- 有损 TinyPng
合并-排列
图片之间必须保留空隙
图片排列方式
- 横向排列
- 纵向排列
合并-分类
把同属于一个模块的图片进行合并
把大小相近的图片进行合并
把色彩相近的图片进行合并
综合以上方式合并
合并推荐
只本页用到的图片合并
有状态的图标合并
浏览器兼容方案
- IE6不支持PNG24半透明 (存2份 : sprite.png 24 sprite_ie.png 8 )
- CSS3 & 切图
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Html单选按钮自定义样式
- CSS中的float和margin的混合使用 2020-06-11
- 如此沙雕的代码注释,原来程序员都是段子手 2020-06-08
- 博客园页面美化源代码 2020-06-04
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash