谈谈网站设计时图片的使用(转)
2010-12-17 17:07
274 查看
谈谈网站设计时图片的使用
本文主要分享笔者在开发 云翔在线软件平台 时合并图片的经验,在文章开始时,我们先看看Google首页的图片:上面就是Google主页使用的图片,所有工具栏的图片都合并在一副图片里面了,其实,在写Css时,DIV的背景图片可以这样指定:
background: url(Images/common.png) no-repeat -163px -31px;
最后两个数值可以理解为以DIV左上角为原点,图片坐上角的坐标:
如上图所示,只要我们设计好DIV的大小,就相当于把图片“裁剪”出来。这样一来,就可以将网站上所有no-repeat的图片整合到一种图片上。然而,现实的问题往往没有那么简单,上面的方法仅仅只能处理no-repeat的图片,而网站中往往要使用到repeat-x,和repeat-y的图片,例如一般的弹出窗口:
以下说说如何处理repeat-x的图片,repeat-y的处理方法类似,以窗口的标题栏的背景图片为例:
如上图所示,我们只需要把所有repeat-x的图片纵向的合并在在一起,然后指定一下y坐标就可以了。同理把所有repeat-y的图片横向的合并在在一起。
如此合并后,这个网站所有repeat-x,repeat-y,no-repeat的图片只需3副图片即可。至于repeat的图片,就没有办法了,只能老老实实单独使用一副图片。
最后鄙视一下IE6,因为IE6默认没有缓存DIV的背景图片,会重复下载,需要调用一下
document.execCommand("BackgroundImageCache", false, true);
才可以。。。
相关文章推荐
- 谈谈网站设计时图片的使用
- 谈谈网站设计时图片的使用
- 30个漂亮的使用图片作为大背景的网站设计案例
- 70个大量使用背景图片的精美网站设计
- 优化网站设计(二十四):通过使用不同的主机减少对cookie的使用
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
- 网页设计中如何成功地使用图片
- 大型网站前端使用图片格式的正确姿势
- 使用ASP.NET从零开始制作设计网站之四
- 网站电话图片采集的插件及使用
- javaEE01-使用很HTML的排版标签编写“网站信息页面”,使用图片标签编写“图面显示页面”,使用列表标签编写“友情链接页面”,使用表格标签编写“首页”,框架标签表现“后台页面”
- H5使用Canvas模板设计签名并将图片保存到本地
- 使用scrapy来抓取 ChinaPub 这个网站上的图片_并且将其下载到本地
- 使用Google WebP图片格式帮助控制网站页面大小
- 使用ASP.NET从零开始制作设计网站之五
- photoShop中使用960栅格系统设计网站界面
- 使用python进行爬虫下载指定网站的图片
- [置顶] 如何高效使用和管理Bitmap--图片缓存管理模块的设计与实现
- Web开发中的性能:谈Google和Facebook的网站使用到的技术,图片预加载CSS Sprites
- 【大型网站技术实践】初级篇:海量图片的分布式存储设计与实现