重构之美WEB背景图合并及定位.doc

重构之美，WEB背景图合并及定位前言：这段时间我会总结我做前端开发长久以来的经验，并会把这些经验和心得写成一些文章与大家分享，希望对正在朝这一领域努力的朋友们有所帮助。第二篇：背景图分解、合并及定位方法本篇先会讲到常见的背景分解方法和结构，后面就会讲到具体如何合并小图成大图以及背景的基本定位了，下一篇会讲到更高级的背景定位方法，敬请期待_！总所周知，我们经常要给页面元素加些修饰图片，比较方便的方法是用背景图，方便定位也方便维护。拿上一篇的可伸缩按钮背景图举个例子，还是先看下图：也许你看到这个图就已经在脑海里给出了一个合理的背景图分解方案，是的，这个结构很简单，如果是单独对这个按钮设计背景的结构，我们可以有三个方案一，分为左、中、右，三个部分。中间用一像素的竖直背景填充，便于伸缩背景，分别保存成3张图片左：中：右：相应的HTML结构也会用内容来嵌套。大致的CSS：divbackground:url(left.gif)no-repeat;padding-left:5px;abackground:url(right.gif)no-repeat;padding-right:5pxspanbackground:url(middle.gif)repeat-x;三个标签都要指定背景图片来源及位置。这种方法虽然图片数量较多，但图片的大小会控制的很小，缺点是不便于维护，图片请求次数增多。二，分为左，右两部分，右边或是左边切下其中一角，剩下的都是另一半的了，保存成两张图左：右：HTML结构会少一些内容两个标签就足够了，带重复背景的这边要做的适当长一些，以便在文字比较多的时候还可以使用CSS：abackground:url(left.gif)no-repeat;padding-right:5pxspanbackground:url(right.gif)no-repeatright0;padding-left:5px;这种方法的优点是图片数量减少，HTML代码更简洁了，而相应的因为刻意延长了背景图，图片容量也会增大。三，直接用一张背景图，全部合并在一起，这个就是我上一篇文章中使用的方法,只用了一张图HTML结构一样简单: 内容CSS样式只需要用到一张图，管理很方便a,spanbackground:url(bg.gif);abackground-position:right0;padding-right:5px;spanpadding-left:5px;可能有人会说，这是最傻的办法，也许吧，这种方法在单个效果上面是完全没什么意义的，但是当一个项目中图片元素很多，多到你很不方便管理，如果按照第一种方法，也许一个大项目中会用到几百到上千个不同的背景元素，不止是图片难以管理，就连HTML结构和CSS代码中都会产生很多冗余代码而难于应付。最要命的一点是图片数量多相应的会让你的网站处于页面下载速度不断变慢和页面请求数不断增多的窘境。是事后疲于奔命地找方法改代码优化，还是事前就已经有合并小图的思想，那么应该会给整个页面制作减少不少的优化成本。这就是今天要着重讲解的图片合并法，合并的方法多种多样，但也不是什么情况都适用，我们应该遵循一些规律。首先要明白只有固定长度或是高度的元素的背景图才可以被合并，如果高度和宽度都不固定，那是无法使用合并背景图的。1.纵向固定，横向自适应的情况，小图和小图要纵向排列。CSS定位:background-position:左或右 具体位置;12345高度是固定的，由于左右有圆角，所以不适合整张图迭代显示，这时候就要做成可能出现的最长宽度了，而且要纵向排列，想想如果横向排列会出现什么情况？2.横向固定，纵向自适应的情况，和上面的正好相反。CSS定位:background-position：具体位置 上或下;3.横向和纵向都固定的情况（包括使用遮盖），随意编排图片的位置。CSS定位:background-position:具体位置 具体位置;例：雅虎关系这张整合的主题图片是比较经典的，对应的元素相互并列排开，光看这图就觉得很美了，而且上面99%的元素都应该是固定高宽的，那1%的不定元素你发现了吗？有没有注意到凡是有右边角的框框，右边角都会被切下来放到大图的最右边（放中间的那个明显是固定宽度的了），而左边却可以放在任意位置，为什么呢？后面再讲_4.不透明的图放一起，可以将左半边圆角和右半边圆角放在同一排，即保持原封不动。如下图：5.透明的图放一起，如果有特殊切面，就必须要把左右分离隔开，不能重叠，同时大图必须保存成透明格式。如下图：现在来解释为什么要把右边角放到大图的右边，不能留一丝空隙，因为在用background-position定位的时候，我们所能作为精确参考的只有左边和上边，比如background-position:10px 10px;都是只相对左边和上边而言的。因此如果要让一个背景图以右边为起点显示，就应该把它放到最右边，然后用background-position:right 0;来定位。以底端为起点的也同理，要把小图放到大图的底端。好了，理论说了这么多，我也有点写晕了，非常感谢能看到这里的兄弟姐妹。还是让我们来看看实例，继续拿上篇的按钮做文章_背景整合：这次我们要用这张皮肤做点其他效果，实际上这张图片在我这里保存的是970的宽度（我考虑到最大的宽度，现在流行的尺寸最宽是970），限于这里的版图，适量缩短了。HTML代码：重构之美系列-背景之长度自适应!-bodymargin:0;padding:0;.examplewidth:400px;margin:0auto;.skin*background:url(/365/images/skin_sales_bar.png);/*整合皮肤的好处，所有元素集体来次声明，后面就不用再出现图片来源的声明了，只需要设定图片的位置，维护起来超级方便*/.skin*display:inline-block;*zoom:1;*display:inline;height:25px;font:60014px/25pxarial;overflow:hidden;/*定义为inline-block可以保留span和a的宽度自适应特性，同时还可以设定边距和高度等块元素才有的特性*/.skina,.skina:visited/*用a元素作为外框，保证整个按钮都是可点击区域*/padding-right:5px;/*padding-right是关键，因为背景是从右向左平铺，和SPAN元素正好是反着来的，所以右边的内边距是用来显示右边圆角背景的。*/cursor:pointer;/*IE在a标签包含span时，鼠标依照span的text样式显示*/color:#fff;background-position:right0;/*背景由右边载入平铺，显示右边圆角*/text-decoration:none;.skinaspanpadding:05px010px;/*背景沿用默认的从左载入平铺，显示左边圆角，右边距的设定是为了平衡左边空隙*/*以下部分都是对不同位置图片的调用*/.purpleabackground-position:right0;.orangeabackground-position:right-50px;.orangeaspanbackground-position:0-50px;.orangea:hoverbackground-position:right-25px;.orangea:hoverspanbackground-position:0-25px;.Dblueabackground-position:right-125px;.Dblueaspanbackground-position:0-125px;-重构之美：背景图合并及定位鼠标滑过效果长度随字数自适应的按钮或标题栏字符数量超出父容器宽度字符数量超出父容器宽度字符数量超出父容器宽度字符数量超出父容器宽度字符数量超出父容器宽