这一部分主要分析一些常见页面效果的实现方式，很有实际价值。从中可以知道一些很不错的效果，实现起来都是比较简单的。

一、背景图效果

1、基础知识：背景图可以水平或垂直平铺，也可以不平铺，需要注意的是，在设置背景图的同时，还可以设置背景色。为了简便，CSS提供了background属性的简写版本:

h1{
       background:#ccc url(img/bullet.gif) no-repeat left center;}

个人觉得，对于背景图，有两个特点特别重要：

一是可以设置背景图的的位置，很多效果都是基于这一点实现的。基于这一点，还产生了CSS Sprits的技术，个人觉得CSS Sprits的优点是减少图片的下载次数，缺点是造成代码的可读性降低，同时，由于图片的尺寸与分布太过固话，造成修改不方便。

二是就CSS2来说，一个元素只能有一个背景图，这样要实现一些比较复杂的效果，就可能会需要添加额外的元素，因为需要用额外的元素来挂上另外的背景图。

2、使用背景图创建项目符号

思路是左中定位项目符号的背景图，然后使用左内边距留出背景图占用的空间。关键代码举例：

h1{
       padding-left:30px;    background-image:url(/img/bullte.gif);    background-repeat:no-repeat;    background-position:left center;}

二、圆角框

1、固定宽度的圆角框

思路是选择元素和元素的子元素，分别挂上上面、下面的不平铺的背景图，挂上中间的平铺的背景图（对于单色没有边框的话，就不需要）。另外，使用内边距防止文本出现在背景图的上面。单色无边框的圆角框实现代码举例：

     
     
     
     
Simple, Fixed Rounded Corner Box
     
  
      
Lorem Ipsum
    
      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
     

2、可以水平扩展的灵活的圆角框

思路和上面类似，不同的地方是用到了一种称为滑动门的的技术，其实就是利用背景图的定位让一张背景图盖在另一张背景图上面，从而让右边的圆角背景图始终盖在左边的背景图上面。覆盖的顺序是右边的盖在左边，上边的盖在下边。实现代码举例，注意，这里使用了两个额外的div来挂背景图：

     
     
     
     
Flexible Rounded Corner Box Example
     
      
       
        
Lorem Ipsum
        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
        
       
      
     

3、山顶角（mountaintop corner）

思路和前面的类似，只不过实现方式要简单一点，没有一层盖一层，个人也觉得上面一层盖一层的方式对于作图有点复杂。这里采用的所谓山顶角，就是用四个圆角图标分别盖在元素的四个角，并且在元素加上相同的背景色，从而形成圆角效果。不足之处是这种方法支持比较简单的框，对于发杂情况还是需要上面那样一层盖一层。实现代码举例，这里也增加了额外的容器来挂背景图：

     
     
     
     
     
      
My Rounded Corner Box
      
This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. 
     

4、一个框，多个背景图

看了上面的例子，可能每个人都在想，要是一个框能有多个背景图，并且每个背景图都可以分别定位该多好。幸运的是，在CSS3中就支持这种方式，苦逼的是支持CSS3的浏览器，特别是在国内，还没有形成主流。语法举例：

.box {
       background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif);    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;    background-position: top left, top right, bottom left, bottom right;}

5、CSS内置支持圆角框：border-radius

看了上面的例子，可能你还在想，就是为了实现个圆角框而已，搞这复杂究竟为哪般。现在有一个好消息，CSS3有了border-radius属性，只需要设置边框角的半径，浏览器就会自己实现这种效果。同样，坏消息是，支持CSS3的浏览器还没形成主流，程序员还需要继续苦逼。先憧憬一下，语法如下：

.box{
       border-radius:1em;}

对于这个新属性，其实现方式还存争议，在得到广泛使用之前，需要使用于浏览器相关的扩展调用。当前Firefox和Safari支持这个属性。

.box {
       -moz-border-radius: 1em;    -webkit-border-radius: 1em;    border-radius: 1em;}

6、border-image

这也是一个CSS3的新特性，可以根据一些简单的百分比技术把图像分为9个单独的部分，浏览器会自动使用适当的部分作为边框的对应部分，如果图像不够大，还会自动平铺，产生可扩展的框。举例：

.box {
     -webkit-border-image: url(img/corners.gif)  25% 25% 25% 25% / 25px round round;}

上面的代码的含义是按水平、垂青两个25%来9分图像，来分别作为背景的各部分，并且设置边框为25px。

上面所有实现圆角框的CSS3新特性，在我测试的Chrome浏览器中全部支持。

三、简单的CSS投影

1、实现思路主要是：给需要投影的图片加上div容器，给容器增加投影图像的背景图，然后，使用负外边距或者相对定位来把图片往左上方便宜一段距离，最终实现投影效果。

举例，这里使用负外边距实现图像的偏移：

     
     
     
     
Easy Drop Shadow Example
     
      
     

2、使用Box-shadow实现投影

Box-shadow属性也是在CSS3中才支持，只需要指定垂直和水平偏移和投影宽度就可以实现投影效果。另外，它还可以和border-radius属性配合使用。

/* pretty */img {
       background:#fff;    padding:4px;    border:1px solid #a9a9a9;}/* drop shadow */img {
     -webkit-box-shadow: 3px 3px 6px #666;  -moz-box-shadow: 3px 3px 6px #666;  box-shadow: 3px 3px 6px #666;}

四、不透明度

1、CSS不透明度

.box {
       background-color: #000;    opacity: 0.8;    filter: alpha(opacity=50); /*proprietary IE code*/}

2、RGBa

RGBa中RGB是指RGB三色，a代表alpha透镜，其值表示不透明读，越大越不透明。

.box {
       background-color: rgba(0,0,0,0.8);}

3、PNG透明度

PNG文件格式最大的有点之一就是他它支持alpha透明度。但是IE6不支持PNG透明度，IE7及以上支持。对于老版本的IE，有两种解决办法：

其一，是使用在IE6中使用专用的AlphaImageLoader过滤器。

其二，使用IE PNG fix技术，涉及微软的-行为（behavior），这里不过多描述。

 五、CSS视差效果

思路是个框增加几个不同的背景图，采用背景图透明方式，产生重叠效果，在每张背景图上使用百分比定位，这样就可以上实现窗口大小改变时，背景图的相对移动效果。具体可以看看中的例子。

六、图像替换的几种技术

1、FIR：关键点，增加额外的外层容器，隐藏里层的文本，显示外层容器的背景化文字

2、Phark：关键点，不隐藏文本，也不增加额外的容器，使用text-indext大的负值，即反向大距离缩进文本到浏览器窗口外，以看不到文本，然后给文本的元素添加文本化的背景图。

3、sIFR：关键点：以js生成Flash图像替换文本，确定是可能比较慢。

总结：

关于CSS背景技术的使用，其实就无外乎以下两点：一是背景图的定位、平铺方式，二多个背景图的层叠覆盖