DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”。
一、背景图合并：
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,在截取第一张背景图标的时候 也就是这张 
③、因为我们是要弄成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实现背景图的三层嵌套以及背景图的合并的更多相关文章
- div+css样式
Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- 用DIV+CSS切割多背景合并图片 CSS Sprites 技术
很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...
- Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法
首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片 ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- css之background的cover和contain的缩放背景图
对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小. 等比例缩放图象到垂直或者水平其中一项填满区域. cover 此时会保持图像的纵横 ...
- 利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS背景100%平铺 浏览器缩小背景显示不全解决办法
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
随机推荐
- JVM探秘4---垃圾收集器介绍
Java虚拟机有很多垃圾收集器 下面先来了解HotSpot虚拟机中的7种垃圾收集器:Serial.ParNew.Parallel Scavenge.Serial Old.Parallel Old.CM ...
- 纯js实现移动端滑动控件，以上下滑动自取中间位置年龄为例；
<!-- 需求:上下滑动,在一个大的div块里显示5个小的值,滑动过程中自动获取中间位置的值 需要注意的是: 1 touchmove会多次被触发: 2 获取中间位置的值可以通过定位得top值来获 ...
- chrome platform
folder_extension: ---menifest.json ---navigator_change.js manifest.json { "manifest_version&quo ...
- Sorl搜索技术
在一些大型门户网站.电子商务网站等都需要站内搜索功能,使用传统的数据库查询方式实现搜索无法满足一高级的搜索需求,比如:搜索速度要快.搜索结果按相关度排序.搜索内容格式不固定等,这里就需要使用全文检索技 ...
- mysql/oracle jdbc大数据量插入优化
10.10.6 大数据量插入优化 在很多涉及支付和金融相关的系统中,夜间会进行批处理,在批处理的一开始或最后一般需要将数据回库,因为应用和数据库通常部署在不同的服务器,而且应用所在的服务器一般也不会 ...
- ora-904 rowid create materialized view
create materialized view t_v asselect t1.*,1 as marker,rowid from t1 t1union allselect t2.*,2 as mar ...
- [WCF REST] 一个简单的REST服务实例
Get:http://www.cnblogs.com/artech/archive/2012/02/04/wcf-rest-sample.html [01] 一个简单的REST服务实例 [02] We ...
- topcoder srm 420 div1
problem1 link 暴力即可.因为即便所有数字的和是50,50所有的不同的划分数只有204226中.所以最长的循环也就这么大. problem2 link 令$f[i][j]$表示有$i$个红 ...
- maven 新建项目时报错“Could not calculate build plan: Failure to transfer org.apache.maven.plugins:。。。。。。。。。。。。。。”
首先,我们看到观察这个错误:Failure to transfer org.apache.maven.plugins,这种错误是项目部署时,maven所关联的仓库中插件的设置出错了. 所以我们需要找到 ...
- strerror函数的总结【转】
本文转载自:https://www.cnblogs.com/xrcun/p/3210889.html 定义函数:char * strerror(int errnum); 函数说明:strerror() ...