有人翻译了《css decorative gallery》这篇文章，这写也是我们前端开发的时候经常用到的一些技巧。感谢翻译者，感谢webdesignerwall
这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示，从简单的装饰一个小图片到应用圆角的边框，再到半透明的蒙版……不废话来，先来看演示：
View Demo (在线演示） and Download（下载）
作者给出了这样做的几点理由：
- 省时方便：不用再用 PhotoShop 去对每张图片进行处理
- 完好地保留了原始图片：因为是用 CSS 对图片进行样式处理，所以不用对图片进行任何修改，保留了最原始的完整的图片。
- 非常的灵活：你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。
- 应用广泛：可以在任何地方，对任意尺寸的图片进行装饰。
- 兼容性强：在大部分浏览器上测试通过，包括 (Firefox, Safari, Opera, 甚至是 IE6 )。
基本思路：
思路挺简单的，就是通过在 DIV 中插入一个额外的 SPAN ，然后通过对插入的 SPAN 设置背景图片来实现图片覆盖的效果。如果你不想在 HTML 中插入额外的、没有语义的标签的话，你可以用 javascript 来解决。下面会介绍到！下面的图很好地解释了它工作的原理：
上面代码中关键的是为
1 | div |
元素设置
1 | position:relative |
，而为相应的
1 | span |
元素设置
1 | position:absolute |
，然后你就可以将
1 | span |
通过
1 | CSS |
的
1 | top |
和
1 | left |
而放置到任意的地方。
针对 IE6 的 PNG Hack
示例中用到了很多 PNG 的背景图片来实现覆盖透明的效果，而 IE6 不支持 PNG 透明，所以要用 Hack 让 IE6 支持 PNG 透明，网上这样的方法有很多，这里作者推荐了一种：iepngfix.htc hack 。需下载 iepngfix.htc 文件并将下面的代码插入到页面的
1 | <head> |
标签中即可。
<style type=”text/css”>
.photo span { behavior: url(iepngfix.htc); }
</style>
<![endif]–>
jQuery 实现方法
如果你不想插入空的、无语意的 span 标签的话，你可以用 jQuery 来向页面中动态地插入标签，也非常的方便。而且不用对原页面进行任何修改。
下面是代码示例：
<script type=”text/javascript“>
$(document).ready(function(){
//prepend span tag
$(“.photo a“).prepend(“<span></span>”);
});
</script>
引入 jQuery 框架后，利用 .prepend 方法向
1 | .photo a |
的元素前插入 span !
下面让我们来看下作者为我们做好的 15 个精美的示例：
#1. Simple Gallery (see demo)
#1b. Mini Icons (see demo)
#2. Photo With Text (see demo)
还可以添加对应的文字。
#2b. Popup Text (see demo)
#3. Mini Paper Clip (see demo)
#4. Cork Board Gallery (see demo, IE6 version)
sIFR Version (Flash Text Replacement) (see sIFR demo)
这个例子中的 span 标签是用 jQuery 添加的！
#4b. Cork Board With Masking Tape (see demo, IE6 version)
#5. Art Gallery – Black Frame (see demo)
#5b. Art Gallery – Gold Frame (see demo)
#6. Grungy Watercolor (see demo)
sIFR Version (see sIFR demo)
#7. Glossy Style (see demo)
#8. Wood Panel Gallery (see demo)
怎么样，很帅吧！！本来想用这个技巧实现区别 wordpress 评论的作者评论的，但一直没想好样式！！希望大家也能用得到哈…
以前做過類似的例子，
要注意的是，原圖最好定死高寛，不然，圖片小於修飾的外框就不太好看了。
[回复]