谈谈网站设计时图片的使用

本文主要分享笔者在开发云翔在线软件平台时合并图片的经验，在文章开始时，我们先看看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);

才可以。。。

谈谈网站设计时图片的使用相关推荐

web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
Win10 IIS本地部署网站运行时图片和样式不正常？
后期会在博客首发更新:http://dnt.dkill.net 异常处理汇总-服务器 http://www.cnblogs.com/dunitian/p/4522983.html 启用关闭win功 ...
浅谈网站设计美工的重要性
在以流量为王的今天,众多网站设计者把重心放到搜索引擎优化这块,以结果为导向的操作显然没有错误,但是在信息大爆炸的今天,我们获取信息便捷度高于任何一个时代,文字是传输信息的主体本身没错,但是同样的文字配 ...
10大网站设计错误，足以毁掉你的网站
纵观国内外互联网,有相当一部分优秀的网站已经开始注意到网站设计方面的一些规则,然后有些人却并不在乎,认为不值得,近乎无视所有网站设计方面的逻辑与已知的网站设计原则. 虽然我们鼓励网站设计师们探索他们的 ...
响应式网站设计_通过这个免费的四小时课程，掌握响应式网站设计
响应式网站设计 This video tutorial from Kevin Powell teaches you to build responsive websites from scratch. ...
基于C#的PhotoS图片分享网站设计
包含: 课程文档+项目源码及数据库文件 PhotoS图片分享网站目录 PhotoS图片分享网站 1 项目说明 2 1.1. 项目目标: 2 1.2. 软硬件环境需求 2 1.3. 使用的关键技术: ...
HTML5期末大作业：奶茶网站设计——带音乐图片滚动奶茶(6页) 美食网页设计作业简单大学生静态HTML网页作品
HTML5期末大作业:奶茶网站设计--带音乐图片滚动奶茶(6页) 美食网页设计作业简单大学生静态HTML网页作品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器 ...
新手谈谈网站交互设计
由于所在团队的项目原因,开始接触实战的交互设计,第一次使用 Axure 来为一个网站设计一份交互.加入团队的时候,整体站点的功能和需求基本有了一个大框架,所以只提出了一些修改和增减的意见,主要针对网站 ...
html网络花店设计图片,花店网站设计，html+CSS+JS
[实例简介] 花店网站设计,html+CSS+JS,包括各种链接,三级菜单,网页视频,背景音乐等 [实例截图] [核心代码] flower └── flower ├── ceshi.html ├── ...

谈谈网站设计时图片的使用

谈谈网站设计时图片的使用

谈谈网站设计时图片的使用相关推荐

最新文章

热门文章