今天在 暴风彬彬 那里看到了这篇 使用CSS为图片添加更多趣味的5种方法 。觉得非常的不错，特转来跟大家分享一下。
记得以前给博客添加图片的时候，为了使图片更加漂亮，往往会使用 Photoshop 对图片进行一些处理，如加一些漂亮的边框啊什么的，但毕竟非常的麻烦。后来才知道原来用 CSS 就可以做出非常漂亮的效果。下面的五种方法就是介绍的这样的技巧，效果也非常的不错，大家可以去试一下。如果你也有自己独到的CSS技巧，希望能一同分享。
阴影效果
通过使用带有一些padding之的背景图来添加阴影效果。
HTML
<img class=”shadow” src=”sample.jpg” alt=”" />
CSS
img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框。
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*/
}
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
}
图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。
HTML
<div class="frame-block">
<span> </span>
<img src="sample.jpg" alt="" />
</div>
<span> </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;
}
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;
}
水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印
HTML
<div class="transp-block">
<img class="transparent" src="sample.jpg" alt="" />
</div>
<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;
}
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}
为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
HTML
<div class="img-desc">
<img src="sample.jpg" alt="" />
<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>
<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;
}
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;
}
怎么样，是不是效果很棒啊！！
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus(); "添加到POCO网摘"){kind=logo}
我晕，又撞主题上了！~
mg12 的inove 主题用的人太多了，嗨！
@蓝兔 是啊！好忧伤的！！
@xiaorsz 敢问 Xiaorsz 邮件回复评论用的是什么插件？
@xiaorsz filter:alpha(opacity=a-int-num)
喜欢最后一个效果~~
这些效果确实很好啊，以前我都用图片，搞得css冗长又难看
3Q 正需要呢
； ）
不错不错,后悔没早点看到这个, 阴影效果 和 为图片添加文字 效果我喜欢…多谢
要能做成插件就好了，那就酷很多，而且又可以易用性
对了，上面的CSS代码是放在style.css里面么？
@loren 是啊，看你是想应用在哪里，如果全站都想用的话就放在style.css中就可以了！！
很漂亮的效果啊！
好像看不到效果了，我用个这个主题中CSS的边框
@木子 看不到效果了！！？
问一下，你这篇文章用的代码显示插件是哪个？
@loren 就是coolcode 哈，自己改的CSS，哈哈！！
@xiaorsz
呵呵，我用的WP-Syntax，难怪说不太一样的
另外，这篇博客的第五个效果“为图片添加说明文字”，我试了一下，有个奇怪的问题，就是其中的文字无法居中，不知道怎么搞的，你能帮忙看看不 http://www.ipinwei.com/blog/?p=1290 这是地址
哦，解决了，我加了一个text-align: center; 就可以了
有个问题想请教一下你，关于这个CSS的最后一个效果，我已经通过添加text-align: center;让文字居中了，但是如何让图像也居中呢？我查阅了CSS手册，关于定位的参数align不知道如何使用？或者是其他的参数？
多谢
@loren 图片也是text-align: center就行了，你可以试下！！呵呵！！不清楚你具体是什么情况呢！！