读书笔记--精通CSS高级Web标准解决方案（四）---CSS背景以及圆角框实现
这一部分主要分析一些常见页面效果的实现方式，很有实际价值。从中可以知道一些很不错的效果，实现起来都是比较简单的。
一、背景图效果
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、固定宽度的圆角框
思路是选择元素和元素的子元素，分别挂上上面、下面的不平铺的背景图，挂上中间的平铺的背景图（对于单色没有边框的话，就不需要）。另外，使用内边距防止文本出现在背景图的上面。单色无边框的圆角框实现代码举例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../css/harmonise.css" type="text/css" /> <link rel="stylesheet" href="../css/base-groups.css" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../css/ie.css" /> <![endif]--> <title>Simple, Fixed Rounded Corner Box | Chapter 4 | CSS Mastery </title> </head> <style type="text/css"> <!-- /* pretty stuff */ h2 { color: #94b767; } /* rounded corner box */ .box { width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom; padding-bottom: 1px; } .box h2 { background: url(img/top.gif) no-repeat left top; margin-top: 0; padding: 20px 20px 0 20px; } .box p { padding: 0 20px; } --> </style> </head> <body> <h1>Simple, Fixed Rounded Corner Box</h1> <div class="box"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p> </div> </body> </html>
2、可以水平扩展的灵活的圆角框
思路和上面类似，不同的地方是用到了一种称为滑动门的的技术，其实就是利用背景图的定位让一张背景图盖在另一张背景图上面，从而让右边的圆角背景图始终盖在左边的背景图上面。覆盖的顺序是右边的盖在左边，上边的盖在下边。实现代码举例，注意，这里使用了两个额外的div来挂背景图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../css/harmonise.css" type="text/css" /> <link rel="stylesheet" href="../css/base-groups.css" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../css/ie.css" /> <![endif]--> <title>Flexible Rounded Corner Box Example | Chapter 4 | CSS Mastery </title> </head> <style type="text/css"> <!-- /* pretty stuff */ h2 { color: #94b767; } /* rounded corner box */ .box { width: 20em; background: url(img/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(img/bottom-right.gif) no-repeat right bottom; padding-bottom: 1px; } .box-inner { background: url(img/top-left.gif) no-repeat left top; } .box h2 { background: url(img/top-right.gif) no-repeat right top; padding-top: 1em; } .box h2, .box p { padding-left: 1em; padding-right: 1em; } --> </style> </head> <body> <h1>Flexible Rounded Corner Box Example</h1> <div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p> </div> </div> </div> </body> </html>
3、山顶角（mountaintop corner）
思路和前面的类似，只不过实现方式要简单一点，没有一层盖一层，个人也觉得上面一层盖一层的方式对于作图有点复杂。这里采用的所谓山顶角，就是用四个圆角图标分别盖在元素的四个角，并且在元素加上相同的背景色，从而形成圆角效果。不足之处是这种方法支持比较简单的框，对于发杂情况还是需要上面那样一层盖一层。实现代码举例，这里也增加了额外的容器来挂背景图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../css/harmonise.css" type="text/css" /> <link rel="stylesheet" href="../css/base-groups.css" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../css/ie.css" /> <![endif]--> <title>Rounded corner box using multiple background images | Chapter 4 | CSS Mastery </title> <style type="text/css"> /* Pretty */ .box { width: 30em; background: #89ac11 url(img/mtop-left.gif) left top no-repeat; color: #fff; padding: 2em 2em 1em 2em; margin-top: 2em; } h2 { margin-top: 0; font-size: 1.6em; } /* Example */ .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; } </style> </head> <body> <div class="box"> <h2>My Rounded Corner Box</h2> <p>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. </p> </div> </body> </html>
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容器，给容器增加投影图像的背景图，然后，使用负外边距或者相对定位来把图片往左上方便宜一段距离，最终实现投影效果。
举例，这里使用负外边距实现图像的偏移：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../css/harmonise.css" type="text/css" /> <link rel="stylesheet" href="../css/base-groups.css" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../css/ie.css" /> <![endif]--> <title>Easty Drop Shadow Example | Chapter 4 | CSS Mastery </title> </head> <style type="text/css"> <!-- /* easy drop shadow */ .img-wrapper { background: url(img/shadow.gif) no-repeat bottom right; clear: right; float: left; position: relative; margin: 10px 0 0 10px; } .img-wrapper img { /*background-color: #fff; border: 1px solid #a9a9a9; padding: 4px;*/ display: block; margin: -5px 5px 5px -5px; position: relative; } --> </style> </head> <body> <h1>Easy Drop Shadow Example</h1> <div class="img-wrapper"><img src="img/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" /></div> </body> </html>
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视差效果
思路是个框增加几个不同的背景图，采用背景图透明方式，产生重叠效果，在每张背景图上使用百分比定位，这样就可以上实现窗口大小改变时，背景图的相对移动效果。具体可以看看http://www.silverbackapp.com/中的例子。
六、图像替换的几种技术
1、FIR：关键点，增加额外的外层容器，隐藏里层的文本，显示外层容器的背景化文字
2、Phark：关键点，不隐藏文本，也不增加额外的容器，使用text-indext大的负值，即反向大距离缩进文本到浏览器窗口外，以看不到文本，然后给文本的元素添加文本化的背景图。
3、sIFR：关键点：以js生成Flash图像替换文本，确定是可能比较慢。
总结：
关于CSS背景技术的使用，其实就无外乎以下两点：一是背景图的定位、平铺方式，二多个背景图的层叠覆盖
