返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: div+css >

css怎么实现文本渐变

2015-06-05 文章标签: css特效 浏览次数:
好的页面可以吸引更多的访问者,加些网站特效什么的可以留住不少访问者,那么文本渐变的效果怎么实现呢,请看下文
这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6需要支持透明PNG的hack) 

这是完美的标题设计,你不必使用photoshop,这将大量节省你的带宽和时间. 
你可以对任何网页字体使用这种效果,而且字号大小也是可变的.

他是如何工作的?

这个技巧很简单.我们只是简单的使用了1px宽的透明png覆盖在了文本上.

 

 代码如下  
<h1><span></span>CSS Gradient Text</h1>
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; 
}

就这样, 你做到了。点击这里查看示例.

使它能够支持IE6

下面这个hack仅仅是让IE6支持透明PNG-24格式的图片.

 代码如下  
<!--[if lt IE 7]> 
<style> 
h1 span { 
  background:none; 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’); 

</style> 
<![endif]–>

jQuery生成版本

如果你不想在代码里有空的<span>标记, 那么你可以使用javascript来动态生成它. 这里是一个简单的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("<span></span>"); 
}); 
</script>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。