读书笔记--精通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背景技术的使用,其实就无外乎以下两点:一是背景图的定位、平铺方式,二多个背景图的层叠覆盖