背景图像效果：
1 URL路径：
1.1 在通过 link 标签引入css文件时，在css中使用 url 路径应该注意目录层次。
background: url(./img/mypicture.jpg); /*表示css文件所在目录的同级img文件夹下的文件*/
backgroudn: url(../img/mypicture.jpg) /*表示css文件所在目录的上级目录中img文件夹下的文件*/
background: url(../img/mypicture.jpg) /*表示css文件所在目录的上级目录中img文件夹下的文件*/
- 当没有“点”的时候，也表示同级目录下的文件喽。
2 圆角框：
2.1 通过CSS3实现：
- 多背景特性实现圆角框。
- 使用 border-radius 属性实现。
.box{ border-radius:1em;}
- 使用 border-image 属性实现(九分法缩放)
.box{ border-image:url(/img/corners.gif) 25% 25% 25% 25% / 25px round round;}
3 投影：
- 通过 box-shadow 属性实现。
img{
box-shadow: 3px 3px 6px #666;
/*水平和垂直偏移、投影的宽度（模糊程度）、颜色*/
}
4 不透明度:
4.1 RGBa:
.alert{
background-color:rgba(0,0,0,0.8); /*背景的不透明度是80%*/
}
5 针对IE的不透明度:
.alert{
background-color:#000;
opacity:0.8;
filter:alpha(opacity=80); /*proprietary IE code*/
}
6 图像替换:
- 为了使用图片logo，但是又想被搜索引擎爬取，可以使用类似下边的方法：
<h2><span>Hello World</span></h2>
h2 { background:url(hello_world.gif) no-repeat;
width:150px;
height:35px;
}
span {
display:none;
}
- 上边方法的缺点就是许多流行的屏幕阅读器会忽略 display 值为none的元素。
