用CSS五种方法为图片增加趣味效果

Here are a few simple tricks to add some flavor to your typical bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain! If you have some of your own techniques, please share them!
翻译：以下是一些简单的技巧，用来为您原本单调的图片增加一些趣味性，虽然这些效果可以用PhotoShop来做，但是很难长久，更新起来比较麻烦，是个令人头疼的问题，下面这些技巧就可以帮你解决这些问题，并将你从痛苦中解救出来！如果你也有自己的技术，分享出来吧！
注：后面的内容，我直接帮大家翻译出来，就不再添加英文了，不然显着比较乱，OK，进入正题~^_^

(1)阴影效果

用一个带有内边距Padding的背景图片来添加阴影效果。查看演示

HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

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

(2)双边框效果

这个技巧估计是现在最常用的，我们通过下面的步骤来实现。查看演示

HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

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

(3)外框效果

 这个效果是基于透明图片叠加技术，至于ie6的png的支持问题，可以到网站tutorial上查看查看演示

HTML

<div class="frame-block">
 <span>&nbsp;</span>
 <img src="sample.jpg" alt="" />
</div>

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)水印效果

这个效果原理是降低主图片透明度，来让背景图片显示出来。查看演示

HTML

<div class="transp-block">
 <img class="transparent" src="sample.jpg" alt="" />
</div>

CSS

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

(5)图片加上说明

利用绝对位置和透明度来实现这个效果。查看演示

HTML

<div class="img-desc">
 <img src="sample.jpg" alt="" />
 <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

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;
}