CSS教程:网页文本渐变

注:本文由 Robin 翻译自 webdesignerwall(这个标题不知道该怎么翻译好, 希望大家能提提意见.) 你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7, 延伸阅读: Warning: An IE7 Auto-Update Is Coming Soon) 优势 这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上 【CSS教程：网页文本渐变】是一个介绍如何利用纯CSS技术实现网页文本渐变效果的教程。这个技巧可以帮助网页设计师避免使用Photoshop等图形编辑工具，从而节省时间和带宽。通过CSS和透明PNG图片的结合，可以实现跨浏览器的文本渐变效果，包括在大部分主流浏览器上的良好兼容性，尽管对于较老的IE6浏览器需要额外的透明PNG Hack。 **渐变效果的工作原理** 这个技巧的核心在于使用一个1像素宽度的透明PNG图片作为背景，覆盖在文本上。HTML结构中，文本被包含在一个`<span>`元素内，然后通过CSS定位这个`<span>`元素，使其绝对定位在文本之上。如下所示： ```html <h1><span></span>CSS Gradient Text</h1> ``` 对应的CSS样式如下： ```css 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; } ``` 这里的`<h1>`元素被设置为相对定位，而`<span>`元素则被设置为绝对定位，并且其宽度和高度与渐变背景图相匹配，背景图片`gradient.png`横向重复显示，创造出渐变的效果。 **IE6兼容性处理** 对于不支持透明PNG的IE6浏览器，需要使用特定的滤镜（`filter`）属性，即`AlphaImageLoader`，来加载并显示透明PNG图片。在HTML文档头部添加以下条件注释来实现这一兼容性处理： ```html <!--[if lt IE 7]> <style> h1 span { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); } </style> <![endif]--> ``` **jQuery生成版本** 如果不想在HTML源码中显式地使用空的`<span>`标签，可以借助JavaScript，特别是jQuery库，动态地在`<h1>`元素之前插入`<span>`元素。以下是一个简单的jQuery实现： ```html <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> ``` 通过这种方式，当文档加载完成后，jQuery会自动在每个`<h1>`元素前插入`<span>`元素，保持页面结构的整洁。 总结来说，这个CSS教程提供了实现网页文本渐变的高效方法，利用CSS和透明PNG图片，避免了对JavaScript或Flash的依赖，同时提供了针对IE6的兼容性解决方案。这个技巧对于提升网页设计的美观性和性能都有显著帮助。