CSS技巧:网页文字渐变效果(2)
来源：互联网 责任编辑：admin 发表时间:2013-07-02 06:33 点击:次
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display
[NextPage]
: block;
width: 100%;
height: 31px;
}
是的，就这些，你已经搞定了。点击此处查看演示页面。
让它在IE6中可用
因为IE6不能正确渲染24位PNG图片，为了显示透明的png图片，下面的hack是必须的。(使用HTML条件注释的方法)在head部分的任何一个地方添加以下代码：
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
<![endif]-->
这正式我们为什么憎恶IE6的原因之一！
jQuery动态加入版本(对语义爱好者有用)
如果你不想在标题里面有个空的<span>标签，你可以使用Javascript动态加入<span>标签。使用jQuery的prepend 方法可以很容易的实现：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//prepend span tag to H1
$("h1").prepend("<span></span>");
});
</script>
相关新闻>>
最新推荐更多>>>
- 发表评论
-
- 最新评论 进入详细评论页>>