精通CSS(1)-图像背景那些事儿

1.背景图像

先说一下background的用法。

通常使用简写形式：background：背景色 背景图 重复方式 定位方式  图像位置，比如background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background-position有center属性，可以让背景居中。

如果使用像素对背景定位，如background-position：20px 20px；位置是从父元素左上角到图像左上角算的。如果使用百分比，如background-position：20% 20%；

位置则是从图片上距左上角x,y距离20%的点到父元素左上角来算的。

2.圆角图像

这里只介绍css3中的方法，不支持的浏览器就见鬼去吧，大不了看到的是直角。

以前的做法是用圆角图像填充图像的四个角，这样为了一个圆角效果会加很多无意义的东西。用css3的话可以一次添加多个图像：

[plain] view plaincopy

1. {  
2.     background-image: url(top-left.gif),  
3.                       url(top-right.gif),  
4.                       url(bottom-left.gif),  
5.                       url(bottom-right.gif);  
6.     background-repeat: no-repeat,  
7.                    no-repeat,  
8.                no-repeat,  
9.                no-repeat;  
10.     background-position: top left,  
11.                      top right,  
12.                      bottom left,  
13.                  bottom right;                   
14.   
15. }  

还可以用border-radius:

[plain] view plaincopy

1. {  
2.     border-radius: 5%;               
3.     -webkit-border-radius: 5%;    
4.     -moz-border-radius: 5%;   
5. }  

最后要说的是border-image属性，利用强大的九分缩放法。就是把一张背景图通过百分比划分成九个部分，这样在图片缩放的时候这九个部分就作为单独的块来缩放。

我要说的是这个功能真的很酷炫，具体的说明参考http://www.w3school.com.cn/cssref/pr_border-image.asp

3.投影

既然css3已经有强大的box-shadow了，那么以前弱爆的方法就应该淘汰了！

用法参考:http://www.w3school.com.cn/cssref/pr_box-shadow.asp或者http://www.w3cplus.com/content/css3-box-shadow

4.不透明度

老方法：

[plain] view plaincopy

1. {  
2.     opacity: 0.5;  
3.     filter:alpha(opacity=50);  
4. }  

简单的方法：

[plain] view plaincopy

1. {  
2.     background-color:rgba(255,0,0,0.5);  
3. }  

IE下6不支持透明度，需要使用AlphaImageLoder过滤器，或者使用微软专有css扩展-行为（behavior），下载合适的.htc文件并在IE6专用的样式表中引用它就行了。

5.css Sprite

将许多图片合成在一张大图里，然后偏移量来获取想要的小图片，这就是css的Sprite精灵。可以减少图片的请求量，减少服务器压力。Sprite主要是通过background-position和height，width来实现。一张图就能理解：