CSS 破碎文字效果

很巧妙的效果，原文来自 CSS-Technique: Worn Type。一个破碎效果的图片盖在文字上（span 是 position:absolute，其背景就是破碎图片），多余部分隐藏（overflow:hidden）

代码:

<style type="text/css">
h2 {
    font:3em/1em "黑体","宋体",serif;
    font-weight: bold;
    margin:0;
    position: relative;
    overflow: hidden;
    float: left;
}
h2 span {
    position: absolute;
    width: 100%;
    height: 1em;
    background: url(images/wornpattern.gif);
}
p {
    clear: left;
}
</style>
<h2><span></span>这是文字，不是图片哦</h2>
<p>上面是文字，不是图片哦</p>