CSS技巧:网页文字渐变效果(2)

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>

	
共2页: 
上一页
1
2
下一页


        


        


        


	

          

	    

	      

		

		  RSS订阅
		
	      
	    
	    

	      

		

		  返回WEB编程
返回到首页
		
	      
	    
	    

	    
          
	


        

	   
相关新闻>>

	   
CSS样式表创建美妙绝伦的网站
CSS设计符合Web标准的网页表单的几个技巧
CSS教程:设计制作网页的CSS经验
CSS也要语义化
相对完美的CSS绝对底部
CSS实例:创建一个鼠标感应换图片的按钮
DIV+CSS制作网页心得
CSS代码优化的两个原因
CSS实例:鼠标滑过文字超级链接背景变色
CSS3教程:box-sizing属性的理解

	

        

          

            
最新推荐更多>>>
            

		
CSS设计符合Web标

                

                 
CSS样式表创建美妙绝伦的网站
CSS设计符合Web标准的网页表单的几个技巧
CSS教程:设计制作网页的CSS经验
CSS也要语义化
相对完美的CSS绝对底部
CSS实例:创建一个鼠标感应换图片的按钮
DIV+CSS制作网页心得

                
            
  
          
 
          

            
热门新闻进入WEB编程频道>>
            

              
DIVCSS
网页设计规范经验：应保持CSS的整洁度和有序性
DIVCSS
关于网站背投广告设计的效益：用最少的时间来做最效率的事情
DIVCSS
网页设计之元素描述：应该选择合适的、有意义的元素描述内容
DIVCSS
网页设计规范思考：CSS文件应该保持整洁和统一
DIVCSS
3款在线CSS代码生成工具
DIVCSS
把XHTML+CSS页面转换成为打印机页面