精通CSS高级Web标准解决方案:背景图像基础

    既然你已经掌握了理论，我们就开始把理论运用到实践中。当今的Web是一种视觉效果非常丰富的媒体。简便的图像标签使网页设计人员能够将毫无趣味的文档变成图形丰富的浏览体验。图形设计人员很快就掌握了image标签（原本是作为向网站中添加可视内容的方式），将它作为对页面进行视觉修饰的方式。实际上，如果没有发明image标签，那么可能就没有网页设计师这种职业。

    不幸的是，对image标签的滥用导致纯修饰性的图像把页面弄乱了。好在CSS使我们能够在页面上显示图像，而不需要让图像成为标签的一部分。实现方法是将图像作为背景添加到现有的元素中。本章将通过一系列实际示例讲解如何使用背景图像创建各种有意思且有用的技术。

    在本章中，你将学习：

    □  固定宽度和可变宽度的圆角框。

    □  滑动门技术。

    □  山顶角。

    □  CSS阴影。

    □  用于IE 5.x和更高版本的PNG透明度支持。

    □  图像替换。

    3.1  背景图像基础

    应用背景图像是很容易的。如果希望网站有一个好看的背景，那么只需将图像作为背景应用于主体元素：

    body {
      background: url(pattern.gif);
      }

    浏览器的默认行为是水平和垂直地重复显示这个图像，让图像平铺在整个页面上。可以选择背景图像是垂直平铺、水平平铺，还是根本不平铺。

    目前渐变非常时髦，你可能希望在页面上应用垂直渐变。为此，需要创建一个很高但很窄的渐变图像，然后将这个图像应用于页面的主体并让它水平平铺：

    body{
    background: #ccc url(gradient.gif) repeat-x;
    }

    因为这个渐变图像的高度是固定的，所以如果页面内容的长度超过了图像的高度，那么渐变就会突然终止。可以创建一个非常长的图像，逐渐变化到一个固定的颜色。但是，很难预测页面会有多长。实际上，只需再添加一个背景颜色。背景图像总是出现在背景颜色的上面，所以当图像结束时，颜色就会显示出来了。如果选择的背景颜色与渐变底部的颜色相同，那么图像和背景颜色之间的转换就看不出来了。

    平铺图像在某些情况下很有用。但是，在大多数情况下，希望在页面上添加不进行平铺的图像。例如，假设希望在网页的开头显示一个大的品牌图像，那么只需将图像直接添加到页面上，在许多情况下这样做就够了。但是，如果图像不包含信息，是纯装饰性的，那么可能希望将图像从其余内容中分离出来。实现的方法是在HTML中为这个图像创建一个“钩子”，然后使用CSS应用这个图像。在下面的示例中，我在标记中添加一个空的div并且给它设置ID branding。然后可以将这个div的尺寸设置为与品牌图像相同，作为背景应用图像并指定不进行平铺。

    #branding {
     width:700px;
     height:200px;
     background:url(/images/branding.gif) no-repeat;
     }

[1]  [2]  

还可以设置背景图像的位置。假设希望在站点的每个标题上添加一个符号，如图3-1所示。可以编写下面这样的代码：
    h1 {
      padding-left:30px;
      background:url(/images/bullet.gif) no-repeat left center;
      } 

 

    图3-1  使用背景图像创建符号

    最后两个关键字指出图像的位置。在这个示例中，图像定位在元素的左边并且垂直居中。除了使用关键字之外，还可以使用像素或百分数等单位设置背景图像的位置。

    如果使用像素设置背景位置，那么图像左上角到元素左上角的距离为指定的像素数。所以，如果指定垂直和水平位置都是20像素，那么图像左上角出现在元素左上角下面20像素、左边20像素的地方。但是，使用百分数进行背景定位的工作方式不太一样。百分数定位并不对背景图像的左上角进行定位，而是使用图像上的一个对应点。所以，如果指定垂直和水平位置都是20%，那么实际上将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置（见图3-2）。

    图3-2  在使用像素进行背景图像定位时，使用图像的左上角。在使用百分数进行背景图像定位时，使用图像上的对应位置

    如果希望使用百分数而不是关键字实现前面的示例，那么要将垂直位置设置为50%，这会使符号图像垂直居中：

    h1 {
      padding-left:30px;
      background:url(/images/bullet.gif) no-repeat 0 50%;
      }

    规范指出，不要将像素或百分数等单位与关键字混合使用。这似乎是一个没有意义的规则，而且许多现代浏览器故意忽略了这个规则。但是，混合使用单位和关键字在某些浏览器上会导致错误，而且很可能使页面失效。因此，最好不要混合使用单位和关键字。

    尽管背景图像是一个容易掌握的概念，但是它们构成了许多高级CSS技术的基础。

购买《精通CSS:高级Web标准解决方案》：http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414

[1]  [2]