传说中的“三层嵌套技术”。

一、背景图合并：

div+css+ps合图相结合的技术；通过精确到1px的css设置，使用ps合成背景图片，特别是小图片合并，来完成页面效果。
  
       首先讲讲三层嵌套原理：
      
       ①要做成这个效果，用ps软件抠出这一栏目
       
       

②继续抠图，截出三张这一的小图标，高度务必一样的大小，才能平铺的时候一样高度，中间的图片一个像素就够了。
      
                                                    
       （bac_left.png）（bac_center.png）（bac_right.png）

③现在就是写代码的步骤：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>三层嵌套--HTMl5自由者</title>

    <style type="text/css">

        .bac-center {

             width: 228px;

             height: 44px;

             background: url('bac_center.png') 0 0 repeat;

        }

       .bac-left {

            height: 44px;

            background: url('bac_left.png') 0 0 no-repeat;

      }

      .bac-right {

           height: 44px;

           background: url('bac_right.png') right 0 no-repeat;

      }

   </style>

</head>

<body>

    <div class="bac-center">

        <div class="bac-left">

            <div class="bac-right"></div>

        </div>

    </div>

  </div>

</body>

</html>

    ④总结：
       针对三层嵌套，优点就不说了，比起整张图片扣起来运用跟小图标运用所带来的加载速度还是很不错的，
但是在大型网站，这样一大张一大张拿出来用，真的很费劲，所以用到三层嵌套，其中带来一个缺点就是代码嵌套太多，标签数量增多也增加了结构深度，同样权衡下两者，要求我们具体问题具体分析才是关键所在。

二、背景图的合并

知道了三层嵌套的优缺点后，发现上面的图标也都是分开的，一个个加载带来服务器请求的压力。所以这时候用到背景图的合并技术。这时候PS的软件就很大上派上用场了；
      图标合并我们要求达到这样的一个效果：


       ①、弄成一张图，注意下：原本中间的图标我们是截取成宽度1px ,现在弄成一张图要求宽高都要三张图片都大小一样，所以这里我是弄成width：38px； height：44px；
      ②、打开PS,在截取第一张背景图标的时候  也就是这张 ，然后鼠标选择菜单栏图像--画布大小（或者快捷键Ctrl+Alt+C），弹出一个框的时候，设置画布大小，如下图：
      
      ③、因为我们是要弄成3张图片合并，所以高度是 44*3=132px  然后鼠标点击定位中的↑，这样图片继续切下来的时候会在第一张图片的下面，三张才能列下来弄成一张。

④、都弄好了之后就是关键的代码环节了：

<!DOCTYPE html>

<html>

<head>

   <meta charset="uf-8">

    <title>背景图合并--HTMl5自由者</title>

    <style type="text/css">

    .bac-center {

         width: 228px;

         height: 44px;

         background: url('bac.png')  0 -44px repeat;

        }

    .bac-left {

        height: 44px;

        background: url('bac.png') left 0 no-repeat;

    }

    .bac-right {

        height: 44px;

        background: url('bac.png') right  -88px no-repeat;

          /*注意定位的方向*/

    }

</style>

</head>

<body>

    <div class="bac-center">

        <div class="bac-left">

            <div class="bac-right"></div>

        </div>

    </div>

  </div>

</body>

</html>

⑤、总结：略

引：http://blog.csdn.net/html5_/article/details/20703089

DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并的更多相关文章

  1. div+css样式

    Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...

  2. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  3. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  4. Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法

    首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片 ...

  5. 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

  6. css之background的cover和contain的缩放背景图

    对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小. 等比例缩放图象到垂直或者水平其中一项填满区域. cover 此时会保持图像的纵横 ...

  7. 利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  9. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. JAVA基础1---Object类解析

    1.Object简介 众所周知,Object类是Java所有类的万类之源,所有Java类都是继承之Object类,而默认就直接忽略了extends Object这段代码. 2.Object类的源码 话 ...

  2. RESTful API 设计指南，RESTful API 设计最佳实践

    RESTful API 设计指南,RESTful API 设计最佳实践 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). ...

  3. centos6.8卸载DB2 10.5

    1.卸载实例 Ø  使用Root用户登陆 cd /opt/ibm/db2/V9.5/instance/ ./db2idrop db2inst1 ./dasdrop db2inst1 2.卸载db2 Ø ...

  4. HDU 1879 继续畅通工程（最小生成树）

    省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).现得到城镇道路统计表,表中列出了任意两城镇间修建道路的费用,以及该道路是否已经 ...

  5. CentOS6.4下邮件服务器搭建

    CentOS6.4下邮件服务器搭建   linux下邮件服务器的搭建大致分为三个步骤 准备工作(真实的生产环境下需要) 发送服务器安装及配置 (Postfix) 接收服务器安装及配置(dovecot) ...

  6. The Little Prince-12/11

    The Little Prince-12/11 最后一段话!!!hha,傻傻的我们...... 成人们对数字情有独钟.如果你为他们介绍一个朋友,他们从不会问你“他的嗓子怎么样?他爱玩什么游戏?他会采集 ...

  7. Django中程序中图片资源的路径问题（static文件夹的放置）

    步骤1:在settings.py文件的最后加上以下内容: STATIC_URL = '/static/'STATIC_ROOT = os.path.join(os.path.dirname(__fil ...

  8. intel FPGA使用

    https://www.altera.com/documentation/swn1503506366945.html https://files.cnblogs.com/files/shaohef/o ...

  9. kali安装搜狗输入法

    安装步骤 依赖1: apt-get install fcitx 依赖2: apt-get install fcitx-libs-qt 重建: apt-get --fix-broken install ...

  10. Android之socket客户端

    接收数据不要用readline(),用read() Socket mSocket = new Socket("192.168.1.100", 8888); DataInputStr ...