来自 CSS Gradient Text Effect的效果，我记得去年就见过，但blog里面找不到，再发。

</p> <style> <p>body {background:#000;margin-top:70px;}</p> <p>.full h1 {</p> <p> font: 40px "Lucida Grande", Arial, sans-serif;</p> <p> position: relative;</p> <p> margin: 0;</p> <p> color: #fff;</p> <p> width:480px;</p> <p>}</p> <p>.full h1 span {</p> <p> background: url(http://www.webdesignerwall.com/demo/css-gradient-text/images/gradient-dark.png) repeat-x left bottom;</p> <p> position: absolute;</p> <p> bottom: 0;</p> <p> display: block;</p> <p> width: 100%;</p> <p> height: 29px;</p> </style> <p><!--[if lt IE 7]></p> <style> <p>h1 span {</p> <p> background: none;</p> <p> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');</p> <p>}</p> </style> <p><![endif]--></p> <div class="full"> <h1>Guoshuang is so great!<span></span></h1> </div> <p><button onclick="document.body.style.backgroundColor='#c00';">背景变红看这里就看清楚了！</button> <button onclick="document.body.style.backgroundColor='#000';">背景变黑</button></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

原理很简单，在文字上面放一个png（32位）透明的图片。ie 7 以下使用 AlphaImageLoader 滤镜。

如果嫌 span 太不 sematic 的话，可以用 js 方法加入。比如用 jquery

</p> <p><script type="text/java script" src="jquery.js"></script></p> <p><script type="text/java script"></p> <p>$(document).ready(function(){</p> <p> //prepend span tag to H1</p> <p> $("h1").prepend("<span></span>“);</p> <p>});</p> <p></script></p> <p>

相关日志：

css 图片渐大效果

CSS 破碎文字效果

CSS 彩虹效果

纯 css 效果的 image hover

CSS 文字效果

Lightbox JS 不错的js+css图片显示效果

用 CSS 模拟的frame 框架效果

纯css制作表头锁定效果！

CSS 阴影标题

更多 关于css的日志