专题：背景 -- IT技术博客大学习 -- 共学习共进步！

现在设计师同学越来越高大上了，纯色背景已经不能满足人民群众日益增长的物质文化需要了，必须整渐变背景o(╯□╰)o。怎么还原呢，设计师直接丢过来一个几十K的图片，这怎么行。。。还好我们有CSS第三代！这次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。

css3:背景属性background-origin/clip详解

css3中背景裁剪和背景原点在实际中应用的不多，起码我目前的情况就是这样，考虑到这两个属性的属性值都是一样，但是含义却不不太一样，因此，索性把他们都合并在一起来讲，那么就先这样吧。

消失的列表背景

IE6中设定了position: relative; float: left的容器下，如果存在着多个带有背景的列表，那么这些列表中有一部分会显示不正常，具体的表现为背景消失。解决的方法是给li加上position: relative。

无缝背景的推荐

日常工作中会有很多做图的需求，刚来时感觉无从下手，现在做的多了也算小有心得。做图要抓住3个要点：背景、人物和文字，三者确定了图片的基本框架，也奠定了图片的好坏程度。背景在一张图中所占面积是最大的，虽然在最底层，但对图片的整体风格起到了至关重要的烘托作用。最近在做图片帖的小专题时会遇到如下问题，找到了一个合适的背景，出来的整体效果图只能留出一定数量的图片位。但因为需求方在编辑时，图片的数量是不定的，前端设计师在切割时就要将背景进行裁剪和再复制，这样就无法使用那些上下关联变化性很强的背景，否则最后切出来的专题就会是一块块重复但不连续的图片显得很突兀。这里就会纠结上了：哪里去找好看但又不怕重复的背景呢？这里，就引出了一个概念：无缝背景。

两侧背景自动延伸的CSS实现方法

方法来源于土豆网的导航，在这里纪录一下实现的思路。主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的，通过position:absolute将需要平铺的背景层叠在另一背景上，这样即可以实现同一位置的两个背景，再使用z-index将内容提升到最高阶显示。

改善IE6中a与a:hover的背景支持

在IE6中背景属性加a与a:hover两者的伪类结合，在正常逻辑下为何不起作用？测试这问题存在IE6及以下浏览器，这问题我经常遇到在之前一直采用其它方法取而代之，现在找到了另一种解决。以导航为例，下面的代码完全符合CSS的逻辑，理论上应该是”a:hove的背景图片”结合”a.nav_1的背景定位” 而得出预想的结果，但IE6却异常地只显示背景图片而没有对上背景坐标Demo（请使用IE6与IE6以上浏览器作对比）。

浏览器对居中的背景图片的兼容性

在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时，居中的背景图片转向以body左对齐。而在Opera及FF中,居中的背景图片依然以缩小的窗口宽度居中对齐，当浏览器窗口宽度少于内容宽度时，拖动横行滚动条就能察觉到页面内容与背景会有错位的现象。

缩小窗口<body>背景被裁掉

此现状出现在IE7、FF、Opera、Chrome、Safari中，当浏览器窗口少于内容，拖动窗口横向滚动条时能发现定义在的背景会被裁掉，似乎背景只计算了当前窗口的宽度。引起这问题的主要原因是在中定义了背景。在IE6不存在此问题。

页面元素的背景及boder被裁掉

在IE5~IE8、FF、Opera、Chrome、Safari中当浏览器窗口少于内容宽度,拖动横向滚动条会发现页面元素的背景及boder被裁掉，主要原因是body子级元素定义了100%宽度或是承继父及的100%宽度（即没有定义宽度）。

一张背景实现自适应九宫格

在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，不过在切图方面会比较严禁有1px的不对称就会出问题，请留意下面例子的切割分析。

渐变背景上的内容垂直居中

不同分辩率下的页面内容垂直居中，这问题在某些情况下会比较麻烦，如：内容在不一致的渐变背景之上，让其垂直居中于不固定高的页面，这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋!

一个标签应用三个背景图片

正确来说这并不算是什么新鲜技术,早在CSS2.0出现伪对象(Pseudo-Elements)时候就已经可以令一个标签应用三个背景图片，只不过是某些低版本浏览器对其支持不完善，而导致这技术在国内几乎无人使用。对于伪对象能轻易地完成三个背景图片的任务，而且玩法灵活多变。