&nbs p;
一、说点东西诱惑你
对于很多网站的大标题都是有一定的文字效果的，比如渐变就是常用的效果，而这些效果往往都是由世界上最厉害的美容产品photoshop做出来的，一个效果就是一张图片，所以，要是要10个不同的文字标题，可能就要制作十张带有渐变效果的文字图片了。
而实际上，无需使用多张photoshop图片，只要一张小小的图片在配合 CSS 就能实现各个文字内容的渐变效果。 //zxx:其实不止渐变效果哦^_^
本文就将展示如何使用CSS，配合一张小小的图片实现文字的各种上佳的效果，没有JavaScript，没有flash，纯粹的CSS，兼容各个浏览器，Firefox，ch rom e，Safari，甚至已经被 微软 做了葬礼的IE6也可以降服。 //zxx: IE6在 美国 出身，在中国养老
二、原理简述
原理概括起来就两个词“覆盖”，用什么覆盖呢？就是一张渐变效果的 png图片 了，覆盖，平铺就可以了。见下面的原理图（张鑫旭 绘制 ）：
上图标签准确来说， 应该 像下面这样：
< h1 ><span></span>上海世博会要 开始 了</h1>
CSS部分的代码与下面的类似：
h1 { pos IT ion: relative; } h1 span { background: url( test .png) re PE at-x; position: absolute; dis play : block; width: 100%; h ei ght: 31px; } 其中h1的中的relative属性起到的更加 重要 的作用是圈住span绝对定位的100% 宽 度。
上面的就是代码原型了，您现在的就是发挥您的 创造 力，制造各类不同的png渐变类型的图片吧。
您可以狠狠地点击这里：CSS与文字特效demo
三、顾及下还在中国悠哉的IE6
想必都 知道 ，含透明 半 透明的png32的图片在IE6下会有蓝蓝的背景，解决的方法很多，您有兴趣可以看看我之前写的“IE6下png背景不透明问题的综合拓展”，里面非常详细的讲述了各类解决IE6下png 背景透明 的问题，这里就直接讲讲在CSS中使用滤镜以兼顾下IE6.
代码如下：
* ht ML h1 span{background:none; filter: PR ogid:DXImageTransform.Microsoft.Alph ai mageLoader(src='test.png', sizingMethod='scale');} 这里使用了 * html这个还是比较经典的IE6 hack，您所要所得就是把上面代码中的& # 8221;test.png”想要透明的png图片路径就可以了。
于是可以得到IE6如下的效果：
四、一些其他的说明
像这种可平铺的背景图片使用其实是非常自由的，其自由在于“位置”、“大小”及“显示方式”。
首先，关于位置，如果覆盖用的png图片高度足够，我们就能够很自由的 改变 background的定位，于是我们就能够灵活的控制想要的渐变强度，同时，我们可以根据这一特性实现hover效果。
其次，关于大小，这里大小涉及到两方面，一是图片的大小，还有一个就是现实图片的 span标签 的大小。前者要放到“显示方式”中讲，我们来说说后者，如果没有设置span高度的制药下面显示文字的一半，猜猜会有什么效果，就是水晶按钮式的水晶效果，很神奇吧，您可以看看下面的截图（来自demo页面）：
再者，就是现实方式。在如今的CSS中，图片的存在方式主流的就是两种，一是直接的 img 标签链接，还有一个就是background -i mage背景图，本demo中，所有的图片都是在background中显示的，都是背景图，其实完全可以直接使用img标签链接这些图片，我们可以随意的控制这些图片的大小而 不用 担心会有什么表现上的问题，为什么呢？因为这些都是平铺式图片，一般而言，平铺效果的图片经过在img形式下通过width或height拉伸效果就是一样的。所以，这里，所有的png图片完全可以直接使用img链接，控制也相当方便。
但是也是有局限性的，局限在于，如果要实现类似上面的水晶效果的话，还有在img标签的外面额外添加一个标签，作用是隐藏img超出的部分。
我之前有篇 文章 （像素的世界及其在web开发 制作 中的应用）讲像素的世界的概念，意在传达一种就是，就是所有我们眼见的页面效果理论上都可以用CSS模拟出来，就像这里的渐变也是如此，具体不讲，在demo页面最后一例，我就是使用的CSS标签拼合出的一个效果。
五、效果赏析
下面就是使用CSS实现的一些文字效果。
1. 金属质感
2. 渐变效果
3. 竖纹效果
4. 横纹效果
5.虎纹效果
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS实现兼容性的渐变、高光等文字效果 全部内容，希望文章能够帮你解决 html5教程-CSS实现兼容性的渐变、高光等文字效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS实现兼容性的渐变、高光等文字效果的详细内容...