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

一、背景图合并：

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. mybatis源码解析7---MappedStatement初始化过程

    上一篇我们了解到了MappedStatement类就是mapper.xml中的一个sql语句,而Configuration初始化的时候会加载所有的mapper接口类,而本篇再分析下是如何将mapper ...

  2. c# Applicatcontext类

    Application类(位于System.Windows.Forms命名空间)公开了Run方法,可以调用该方法来调度应用程序进入消息循环.Run方法有三个重载 1.第一个重载版本不带任何参数,比较少 ...

  3. [转载] c#中decimal ,double,float的区别

    一直很奇怪C#的预定义数据类型中为什么加了一个decimal,有float和double不就够了吗?今天来挖一挖. 浮点型 Name CTS Type De script ion Significan ...

  4. [转载]SQL中EXISTS的用法

    比如在Northwind数据库中有一个查询为SELECT c.CustomerId,CompanyName FROM Customers cWHERE EXISTS(SELECT OrderID FR ...

  5. How to do if the GM MDI cant connect with the software

    When you use GM MDI on your laptop , you may meet some troubles . Such as it cant communicate with t ...

  6. 每日linux命令学习-rpm命令

    rpm命令 rpm是一款强大的Redhat软件包管理工具,可创建.安装.查询.验证.升级和卸载每个软件包,软件包是存储文件,包括需要安装的文件和名称.版本.说明等报信息. rpm默认支持7种操作模式, ...

  7. Golang命令行拷贝文件

    package main import ( "fmt" "io" "os" ) func main() { list := os.Args ...

  8. JavaScript修改元素

    案例1 删除元素 如需删除 HTML 元素,需要清楚该元素的父元素 该js函数代码如下 function remove(){ var parent=document.getElementById(&q ...

  9. python之块包导入

    一.模块 1.什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写 ...

  10. k8s (kubernetes) 代码分析

    简易入门 结构图: debug 先了解 etcd API源码分析 API server 是中心． https://www.jianshu.com/p/88c6ed78b668 $ git ls-fil ...