背景图片的定位

1.背景定位主要通过background-position属性来设置.属性说明如下：

2.需要注意的是background-postion通过length来设置的话，坐标原点在图像的左上角。
而通过percent来设置的话，其实是将图片上相应百分比的点与父类元素上相应百分比位置的点重合得到的结果。
所以当设置成50%时会出现居中显示的现象。

3.要避免出现length和percent方式混合设置的情况，这将使浏览器抓狂，不知道能干出点什么来。

具体示例可以参考，这里。 示例下载

圆角框

1.固定宽度圆角框
思路：基本上通过两个裁剪好的圆角图片(顶部一个，底部一个)分别设置为相应块元素的背景。
限制:a.圆角框的宽度有圆角图片的大小所限制.
b.内层块与外层快之间不能存在间隔。即外层块不能设置padding，内层块不能设置margin 和 border。
c.圆角图片的背景颜色是预先设置好的，修改框样式时需要替换图片。
具体实现：
方式a:重复背景颜色
方式b:重复背景图片
具体示例可以参考，这里。 示例下载

2.不固定宽度圆角框:滑动门技术<sliding doors technique>
思路：基本上与上面的思路一致，不过圆角图片被进一步的细分。将上面的图片拆分成了左上，右上，左下，右下四个图片，
这样的话用来定位图片的块元素也要相应的增加。简单来说4个图片需要4层块元素来定位。
限制:a.圆角框的宽度有圆角图片的大小所限制.但是这里的限制出现了一点点变化
即圆角框的宽度可以在小于左上+右上宽度的和的范围内变动；圆角框的高度可以在小于左上+左下高度的和的范围内变动。
b.定义背景图片的任意两层之间不能存在间隔。即外层块不能设置padding，内层块不能设置margin 和 border。
c.圆角图片的背景颜色是预先设置好的，修改框样式时需要替换图片。
d.还有个限制就是为了实现滑动门技术，人为的添加了多层无实际语义的块元素，这是的代码的可维护性变差了。
具体示例可以参考，这里。 示例下载

3.如果在扩展一下：将图片拆分成9个图片，即左上，上中，右上，左中，中部，右中，左下，下中，右下 （图片井字形拆分）。
这样可以利用图片的重复来实现宽度和高度自由的圆角框了。
限制：基本上同上面一样，宽度高度的限制不存在了。
但是为了定位这些背景图片所添加的多个无语义块元素不是人人都能接受的，或者说是很难有人接受的。
如何实现大小自由的圆角框呢？
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

具体示例可以参考，这里。 示例下载

山顶角框(mountaintop corner)

思路:圆角框的实现思路和上是一样的，区别在于上面的实现中角图片的背景是确定的，而山顶角框中利用利用位图蒙版来替代角图片，将实际上位图蒙版中角图像的位置留留成透明的，这样的的该蒙版的透明部分的颜色将显示为所在块的背景颜色，这样就实现了角图片颜色可以通过设置背景颜色来更改的目的。

具体示例可以参考，这里。 示例下载

阴影

1.简单阴影
思路：基本上就是将背景图片放置到图片的下面，通过适当的位移来在某个角落上面显示出背景图片，从而达到显示阴影的效果。
实现方式：可以通过对背景图片margin赋予负值来偏移背景图片,这种做法形成的阴影称为简单阴影；另一种做法就是通过将图片与背景图片的相对位置来相对定位来达到形成阴影的效果，这种做法称为Clagnut方法。
限制：图片的长宽应该要小于阴影图片的长宽这样形成的阴影看起来会比较完整，当然如果背景图片做过特殊的处理的话那就另当别论了。

2.模糊阴影
思路：上面形成的阴影被指边缘缺乏过渡，所以才有了模糊阴影的方法的出现。主要思路就是利用一个具有alpha透明度的PNG来盖住阴影图象的边缘。
实现方式：为了实现这个PNG图片的覆盖，自然需要添加另外一个块元素用来定位这个图片。
具体实现可以看这里。<为了兼容IE的各个版本，可是费了脑筋的>
注意在实现模糊阴影时利用了alpha透明度的PNG图片，对于这个IE的支持可不好，好在又不少方法可以解决：
1.利用过滤器：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(scr='shadow.png',sizingMethod='crop');
2.利用条件注释来屏蔽可能造成的不良影响：
<!--[if gte ie 5.500]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

3.洋葱皮阴影
思路：为了弥补阴影边缘缺乏过渡的情况，采用类似于山顶角的实现。创建两国阴影尾部Gif,用它们覆盖在主阴影图像的末尾上。
实现方式：为了定位这两个背景图片，需要给定义两个钩子。即定义两国无语意的块元素来放置这两个gif。
具体实现看这里。
限制：添加了多个无语意块元素，破坏了样式表的可维护性。

具体示例可以参考，这里。 示例下载

图片替代

所谓的图片替代就是利用背景图片替换文档中的文本，不是去除文本，而是利用CSS隐藏文本。
实现方式：
1.FIR(Fahrner Image Replacement):文本形成的块隐藏起来
2.Phark：文本偏移
3.Gilder/Levin：利用图片定位到文本上面将文本遮蔽起来。
4.IFR(Innman Flash Replacement)与sIFR(可伸缩Inman Flash Replacement)
要实现sIFR可以利用sifr脚本来处理，具体可以看这里:http://www.mikeindustries.com/sifr

具体示例可以参考，这里。 示例下载