背景图像和图像替换

一、背景图像定位
在使用像素进行背景图像定位时，使用图像的左上角。在使用百分数进行背景图像定位时，使用图像上的对应位置。

二、圆角框
http://tinyurl.com/82y81

山顶角
位图角蒙板。白色的蒙板将覆盖背景颜色，产生简单的曲线效果。
http://simplebits.com/

三、阴影
1.简单的CSS阴影
http://www.1976design.com
<div class="img-wrapper"><img src="dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" /></div>
<!--一定要将这些代码放在一行上，而且在div和图像之间不能有空格。IE5.5有一个空格bug-->

.img-wrapper{
background:url(images/shadow.gif) no-repeat bottom right;
 clear:right;
 float:left; /*产生收缩包围*/
position:relative;/*IE6.0--bug*/
}
.img-wrapper img{
margin:-5px 5px 5px -5px;
background-color:#fff;
display:block; position:relative;/*IE6.0--bug*/
border:1px solid #ccc;
padding:4px;
}

2.来自Clagnut的阴影方法
相对定位
www.Clagnut.com
.img-wrapper{background:url(images/shadow.gif) no-repeat bottom right;
float:left;/*产生收缩包围*/
line-height:0;}
.img-wrapper img{background:#fff; padding:4px; border:1px solid #ccc; position:relative; left:-5px; top:-5px;}

3.模糊阴影
.img-wrapper{background:url(images/shadow.gif) no-repeat right bottom; float:left;/*产生收缩包围*/}
/*方法一*/
.img-wrapper div{background:url(images/mask.png) no-repeat left top !important; background:url(images/mask.gif) no-repeat left top; padding:0px 5px 5px 0px;
float:left;/*IE5.2bug产生收缩包围*/}
.img-wrapper img{background-color:#fff; border:1px solid #ccc; padding:4px;}

/*方法二*/
创建一个新的CSS文件ie55.css,对除IE之外的其他浏览器隐藏它。
.img-wrapper div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/shadow2.png',sizingMethod='crop'); background:none;}
<!--[if gte ie 5.5000]-->
<link rel="stylesheet" type="text/css" href="ie55.css"/>
<![endif]-->

4.洋葱皮阴影
.img-wrapper{background:url(images/shadow.gif) no-repeat right bottom; float:left;/*产生收缩包围*/ }
.img-outer{background:url(images/bottom-left2.gif) no-repeat left bottom; float:left;/*IE5.2bug产生收缩包围*/}
.img-inner{background:url(images/top-right2.gif) no-repeat top right; padding:0px 5px 5px 0px; float:left;/*IE5.2bug产生收缩包围*/}
.img-wrapper img{background-color:#fff; border:1px solid #ccc; padding:4px; display:block;}


四、图像替换
1.FIR
许多流行的屏幕阅读器会忽略那些display值设置为none或hidden的元素。因此会完全忽略这个文本，造成严重的可访问性问题。产生了相反的效果。因此，最好不要使用这种技术。
<h2>
  <span>Hello World</span>
</h2>
h2{background:url(hello_world.gif) no-repeat; width:150px; height:35px;}
span{display:none;}

2.Phark
适合屏幕阅读器的图像替换技术，而且不需要添加额外的无语义div
www.phark.net
<h2>Hello World</h2>
h2{text-indent:-5000px; background:url(hellow_world.gif) no-repeat; width:150px; height:35px;}

3.Gilder/Levin方法
对屏幕阅读器是有效的，而且在关闭图像但是打开CSS的情况下会显示文本。
缺点需要添加无语义的span
<h2>
  <span></span>Hello World
</h2>
h2{width:150px; height:35px; position:relative;}
h2 span{background:url(hello_world.gif) no-repeat; position:absolute; width:100%; height:100%;}