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

posted @ 2013-05-02 23:35 ll2012 阅读(286) 评论(0) 收藏举报

刷新页面返回顶部

ll2012

读书笔记--精通CSS高级Web标准解决方案（四）---CSS背景以及圆角框实现

公告