2010年3月6日 的存档

• 使用CSS为图片添加的五种特殊效果

  日期：2010.03.06 | 分类：CSS+HTML | 评论数：0

  1、阴影效果
  通过使用带有一些padding之的背景图来添加阴影效果。
  演示：
  http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm
  HTML：

  CSS：

  img.shadow {
              background: url(shadow-1000×1000.gif) no-repeat right bottom;
              padding: 5px 10px 10px 5px;
  }
  

  2、双边框效果
  这应该是目前最常见的技巧，我们通过以下方式创建说边框。
  演示：
  http://www.sohtanaka.com/web-design/examples/drop-shadow/doubleborder.htm

  HTML：

  CSS：

  img.double-border {
      border: 5px solid #ddd;
      padding: 5px; /*Inner border size*/
      background: #fff; /*Inner border color*/
  }
  

  3、图片外框效果
  webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
  演示：
  http://www.sohtanaka.com/web-design/examples/drop-shadow/framed.htm

  HTML：

  CSS：

  .frame-block {
      position: relative;
      display: block;
      height:335px;
      width: 575px;
  }
  .frame-block span {
      background: url(frame.png) no-repeat center top;
      height:335px;
      width: 575px;
      display: block;
      position: absolute;
  }
  

  4、水印效果
  你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印。
  演示：
  http://www.sohtanaka.com/web-design/examples/drop-shadow/watermark.htm

  HTML：

  CSS：

  .transp-block {
      background: #000 url(watermark.jpg) no-repeat;
      width: 575px;
      height: 335px;
  }
  img.transparent {
      filter:alpha(opacity=75);
      opacity:.75;
  }
  

  5、为图片添加说明文字
  使用绝对定位和透明度的设置来添加灵活的说明。
  演示：
  http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm

  HTML：

  
      
      Salone del mobile Milano, April 2008 - Peeta
  
  

  CSS：

  .img-desc {
      position: relative;
      display: block;
      height:335px;
      width: 575px;
  }
  .img-desc cite {
      background: #111;
      filter:alpha(opacity=55);
      opacity:.55;
      color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 555px;
      padding: 10px;
      border-top: 1px solid #999;
  }