《精通CSS高级WEB标准解决方案》第三章：背景图像和图像替换

我在www.c09.com 发表了这个笔记并上传了原著的PDF，今天有空，转到BLOG上来。

第三章、背景图像和图像替换
3.1背景图像基础

• 给页面设置背景[code]
  body{
      background:url(pattern.gif);
  }
  [/code]
• 给背景加上渐变效果[code]
  body{
      background:#ccc url(gradient.gif) repeat-x;
  }
  [/code]要点：页面过长时，背景图像结束后就会显示背景颜色，所以背景颜色与背景图案底部颜色相同，这样就看不出背景图像和颜色之间的转换了。
• 用背景代替image[code]
  #branding{
      width:700px;
      height:200px;
      background:url(/images/branding.gif) no-repeat;
  }
  [/code]
• 设置背景图像位置[code]
  h1{
      padding-left:30px;
      background:url(/images/bullet.gif) no-repeat left center;
  }
  [/code]这段代码为每个标题左边加上一个标记图片，left指左边，center指垂直居中。
  也可以这么写：[code]
  h1{
      padding-left:30px;
      background:url(/images/bullet.gif) no-repeat 0 50%;
  }
  [/code]

3.2圆角框

• 固定宽度的圆角框[code]
  <div class='box'>
  <h2>标题</h2>
  <p>内容</p>
  </div>
  <style>
  .box{
      width:418px;
      background:#effce7 url(images/bottom.gif) no-repeat left bottom;
  }
  .box h2{
      background:url(images/top.gif) no-repeat left top;
      padding:10px 20px 0 20px;
  }
  .box p{
      padding:0 20px 10px 20px;
  }
  </syle>
  [/code]
• 更生动的边框样式[code]
  .box{
      width:424px;
      background:url(images/bg-tile.gif) repeat-y;
  }
  .box h2{
      background:url(images/bg-top.gif) no-repeat left top;
      padding-top:20px;
  }
  .box .last{
      background:url(images/bg-bottom.gif) no-repeat left bottom;
      padding-bottom:20px;
  }
  .box h2,.box p{
      padding-left:20px;
      padding-right:20px;
  }
  <div class='box'>
  <h2>标题</h2>
  <p class='last'>内容</p>
  </div>
  [/code]
• 灵活的圆角框（不限宽度）
  原理是利用滑动门技术(sliding doors technique)，用右边的图案覆盖左边的图案[code]
  <div class='box'>
  <div class='box-outer'>
  <div class='box-inner'>
  <h2>标题</h2>
  <p>内容</p>
  </div>
  </div>
  </div>
  <style>
  .box{
      width:20em;
      background:#effec7 url(images/bottom-left.gif)
      no-repeat left bottom;
  }
  .box-outer{
      background:url(images/bottom-right.gif) no-repeat right bottom;
      padding-bottom:5%;
  }
  .box-inner{
      background:url(images/top-left.gif) no-repeat left top;
  }
  .box h2{
      background:url(images/top-right.gif) no-repeat right top;
      padding-top:5%;
  }
  .box h2,.box p{
      padding-left:5%;
      padding-right:5%;
  }
  </style>
  [/code]

3.3阴影

• 简单的阴影效果[code]
  <div class="img-wrapper"><img src='dunstan.jpg' width='300' height='300' alt='Dunstan Orchard' /></div>
  [/code]IE5.5中有一个bug，要求以上标记必须在同一行中。
  接下来，为上面的内容设置CSS特效[code]
  .img-wrapper{
      background:url(images/shadow.gif) no-repeat bottom right;
      clear:right;
      float:left;
      /*兼容IE5设置*/
      position:relative;
  }
  .img-wrapper img{
      /*偏移偏移照片显示阴影*/
      margin:-5px 5px 5px 05px;
      /*加边框*/
      background-color:#fff;
      border:1px soid #a9a9a9;
      padding:4px;
      /*兼容IE5设置*/
      display:block;
      position:relative;   
  }
  [/code]
• 也可以直接用相对定位的偏移达到相同的效果[code]
  .img-wrapper{
      background:url(images/shadow.gif) no-repeat bottom right;
      float:left;
      line-height:0;
  }
  img-wrapper img{
      background:#fff;
      padding:4px;
      border:1px solid #a9a9a9;
      position:relative;
      left:-5px;
      top:-5px;
  }
  [/code]
• 更多阴影方法：还有几个方法能够让阴影显示效果更加柔和和逼真

3.4图像替换

• 为保证字体美观，我们经常用图片来代替文字，如果不愿意将图片嵌入HTML代码中，那么也可以用CSS来替换它
• Phark方法：语义清晰，但如果用户关闭了图像显示则无法显示文字(文字的作用，仅仅是利于搜索引擎搜索和屏幕阅读器阅读)[code]
  <h2>Hello World</h2>
  h2{
      text-indent:-5000px;
      background:url(hello_world.gif) no-repeat;
      width:150px;
      height:35px;
  }
  [/code]
• Gilder/Levin方法:该方法使用了一个额外的span标签，但当图片无法显示时，就会显示文字[code]
  <h2>
      <span></span>Hello World
  </h2>
  h2{
      width:150px;
      height:35px;
      position:relative;
  }
  h2 span{
      background:url(hello_world.gif) no-repeat;
      position:absolute;
      width:100%;
      height:100%;
  }
  [/code]
• 用flash替换文字：www.mikeindustries.com/sifr
• 个人观点：对于SEO而言，img标签的title内容，效果远远不如h2标签，所以，书中为了求得美观和SEO的平衡，写了这个章节来展开讨论。但这几个方法，对于工作量来说，是大大增加了，所以应该只适合企业网站，对于大型门户网站，还是直接用文字作为标题更加相宜。