·这是纯粹的css技巧，没有使用任何js脚本或者flash，并且它可以在大多数浏览器上正常工作（IE6需要支持透明PNG的hack） 。
·这是完美的标题设计，你不必使用photoshop，这将大量节省你的带宽和时间。
·你可以对任何网页字体使用这种效果，而且字号大小也是可变的。
这个技巧很简单，我们只是简单的使用了1px宽的透明png覆盖在了文本上，如图。
下面，我们来看看CSS代码：
- CSS样式表
h1 { position: relative }
h1 span { position: absolute } h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
- IE条件注释
<!--[if lt IE 7]>
<style>
h1 span {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>
如果你还熟悉JQuery，就可以省去代码里多余的标签啦：
- JQuery代码
<script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//prepend span tag to H1
$("h1").prepend("");
});
</script>
查看演示，请运行以下代码：
- HTML :\ Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行 运行此代码
已有人对此文发表了评论