图像拼合

图像拼合 - 简单实例

  1. <style>
  2. img.home {
  3.     width: 46px;
  4.     height: 44px;
  5.     background: url(/images/img_navsprites.gif) 0 0;
  6. }
  7.  
  8. img.next {
  9.     width: 43px;
  10.     height: 44px;
  11.     background: url(/images/img_navsprites.gif) -91px 0;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16.  
  17. <img class="home" src="/images/img_trans.gif"><br><br>
  18. <img class="next" src="/images/img_trans.gif">
  19.  
  20. </body>

实例解析：

  • <img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
  • 宽度：46px;高度：44px; - 定义我们使用的那部分图像
  • background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

图像拼合 - 创建一个导航列表

  1. <style>
  2. #navlist{position:relative;}
  3. #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
  4. #navlist li, #navlist a{height:44px;display:block;}
  5.  
  6. #home{left:0px;width:46px;}
  7. #home{background:url('/images/img_navsprites.gif') 0 0;}
  8.  
  9. #prev{left:63px;width:43px;}
  10. #prev{background:url('/images/img_navsprites.gif') -47px 0;}
  11.  
  12. #next{left:129px;width:43px;}
  13. #next{background:url('/images/img_navsprites.gif') -91px 0;}
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <ul id="navlist">
  19.   <li id="home"><a href="/"></a></li>
  20.   <li id="prev"><a href="/css/"></a></li>
  21.   <li id="next"><a href="/css/"></a></li>
  22. </ul>
  23. </body>

实例解析：

  • #navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
  • #navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px

现在开始每个具体部分的定位和样式：

  • #home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
  • #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
  • #prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
  • #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
  • #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
  • #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）

图像拼合s - 悬停效果

我们添加悬停效果只添加三行代码：

  1. #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
  2. #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
  3. #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

【Demo】CSS图像拼合技术的更多相关文章

  1. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

  2. css图像拼合技术（精灵图）

    CSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合. 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 图像拼合实例 有 ...

  3. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  4. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  5. CSS 图像拼合技术（雪碧图）

    1.css 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 代码如下: <!docty ...

  6. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  7. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...

  8. css sprites拼合

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的 ...

  9. css雪碧技术的用法。

    ---恢复内容开始--- 在目前前端开发阶段,页面会出现大量的小图片,服务器加载的时候比较吃力,怎么用 一种办法把图片都合并到一张图片上呢?这就用到了css雪碧技术. 雪碧技术是雪碧团队开发,也有人叫 ...

随机推荐

  1. Java Concurrency In Practice

    线程安全 定义 A class is thread-safe if it behaves correctly when accessed from multiple threads, regardle ...

  2. .net ASPxTreeList 使用手记

    ASPxTreeList在使用ASPxGridViewExporter控件做导出时,如果指定文件名是中文时会乱码可以用以下方法解决: grvExporter为ASPxGridViewExporter控 ...

  3. Linux用户空间网络配置工具tips

    1.当调用`ifconfig eth0 down`命令关闭网络设备eth0时,会产生如下影响: 所有配置在该网卡上的IP地址都将失效并且被移除 (在ubuntu 14.04上测试,IP并不会被移除,重 ...

  4. String StringBuffer StringBuilder 老生常谈

    1.String 与 StringBuffer . StringBuilder的区别 String 字符串常量 而 (StringBuffer 和 StringBuilder 字符串变量) 执行速度上 ...

  5. Oracle 11g数据库详解

    常见异常: ORA-14025:不能为实体化视图或实体化视图日志指定PARTITION ORA-14026:PARTITION和CLUSTER子句互相排斥 ORA-14027:仅可以指定一个PARTI ...

  6. java多线程总结（二）

    线程一般有6个状态: 新建状态:NEW 可运行状态:RUNNABLE 休眠状态:TIMED_WAITING 等待状态:WAITING 阻塞状态:BLOCKED 终止状态“TERMINATED 当我们使 ...

  7. nginx灰度环境

    1.nginx.conf split_clients "${remote_addr}AAA" $request_type { 25% "abtest"; * & ...

  8. go——标准命令

    Go本身包含大量用户处理Go程序的命令和工具. 1.子命令 go命令的子命令:build:用于编译指定的代码包或Go语言源码文件. 命令源码文件会被编译成可执行文件,并存放到命令执行的目录或指定目录下 ...

  9. HDU 6319 Ascending Rating (单调双端队列)

    题意:给定一个序列a[1..n],对于每个长度为m的连续子区间,求出区间的最大值和从左往右扫描该区间最大值的变化次数. 分析:先O(n)处理出整个序列的值.求出每个长度为m的连续区间中的最大值可以用单 ...

  10. HDU - 3605 Escape (缩点+最大流/二分图多重匹配)

    题意:有N(1<=N<=1e5)个人要移民到M(1<=M<=10)个星球上,每个人有自己想去的星球,每个星球有最大承载人数.问这N个人能否移民成功. 分析:可以用最大流的思路求 ...