此效果用的是以前介绍过的两个技术实现，第一个就是CSS3实现纹理图案背景，第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。
文章关键字 ‘background’
小tips: CSS3 webkit下彩条文字效果实现
2015年03月15日，星期日半深入理解CSS3 object-position/object-fit属性
2015年03月15日，星期日
现代web显示环境万变，响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局（任意宽度水平自适应）都比较常见，结果，在处理这些有着固定尺寸的元素的时候，就会遇到障碍，例如，一个2:1的视频，永远要等比例充满容器，但是，随着浏览器宽度不一样，容器的长宽比有可能小于2，也有可能大于2. 你说，你能轻松实现小于比例2时候，视频宽度100%；比例大于2的时候，高度100%吗？
显然，很麻烦，最后大多还是使用JS去把控。正是为了应对类似这样的响应式需求，object-fit和object-position才应运而生……
SVG特征、支持以及一些实际使用问题
2012年08月22日，星期三去年9月份曾写过“使用SVG实现gradient背景渐变”一文，其中有对SVG比较术语化的解释，以及SVG的创建、SVG编辑器使用、简单的实际应用等。
不过，之前的介绍，虽然也有内容，不过总给人以生硬之感，仿佛是直接从山上凿下的原石，没有美化与雕琢。而这里的介绍（自然没有重复）似乎更接地气些，应该会给你一点别样的关于SVG的收获。
一如既往，有demo，有截图，有源代码示意。希望本文的内容能够对您的学习有所帮助。
小tip:巧用CSS3属性作为CSS hack
2011年08月15日，星期一本文是个短篇，一点小技术的展示。如何妙用CSS3属性作为CSS hack来实现一些兼容性的页面效果，同时，又能兼顾一些现代浏览器。提供demo页面，必要截图以及源代码展示。总之，希望本文的内容能够对您的学习有所帮助。
CSS3 background扩展属性element简介
2011年07月16日，星期六CSS3的世界就像是未知的海洋世界，经常会冒出一些气息古怪的玩意。就拿background这个属性来说，普通的图片，背景色自然不在话下，还支持多个背景图片，支持gradient线性或径向渐变，支持自定义起始方位，支持sapce和round平铺，支持背景大小自定义，剪裁形式自定义。
昨天，在mozilla开发者官网又发现了一个很有爱的background属性，叫做element。可以把页面元素当作背景图片来使，真是很神奇很嘎嘎，这里就简单介绍下……
小tip:IE不支持CSS3多背景的替代解决方案
2011年05月23日，星期一IE6-IE8浏览器不支持CSS3多背景(Multiple backgrounds)，只使得这个很惹人爱的属性没了用武之地，好在IE浏览器下还是有替代的解决方法的。而本文的内容就是介绍这种替代方法，并展示了比较实际的应用实例。显然，像这种性质文章，demo页面自然少不了，丰富飞截图自然少不了，必要的源代码展示也少不了。总之，希望本文的内容能够对您的学习有所帮助。
翻译 – CSS3 Backgrounds相关介绍
2011年05月8日，星期日
就上周吧，出了个关于CSS3 Backgrounds的课件，个人觉得对于学习很有帮助，于是决定翻译下，不过作者似乎将下载功能关闭了，于是不能再原pdf文件上修改，不得已，自己就整了个长长的HTML版本的，也即是本文的主要内容了。本文截图超多，但是没有demo页面，图文并茂，相信能够对您的学习会有所帮助的。
CSS实现兼容性的渐变背景(gradient)效果
2010年04月9日，星期五经过之前对Firefox浏览器渐变背景实现的详细介绍，以及webkit核心浏览器下渐变背景实现的详细介绍，这里可以很游刃有余的介绍如何实现兼容性的渐变背景效果了。本文由一部分内容是介绍如何使用滤镜实现IE下的渐变背景效果，配合CSS3的gradient渐变属性，实现兼容性的渐变背景效果（Opera浏览器除外）。本文提供详细的代码展示，效果截图以及demo页面，希望能对您的学习有所帮助。
CSS gradient渐变之webkit核心浏览器下的使用
2010年04月8日，星期四渐变是一种应用于平面的视觉效果，可以从一种颜色逐渐地转变成另外一种颜色，故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如，您可以指定一个这么一个渐变：顶部的颜色是红色，中间的是蓝色，底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现，可以用来代替图片URL。在webkit核心浏览器下(Safari4+, Chrome)，有两种类型的渐变，线性的和径向的。您还可以指定多个中间过渡色，此称之为color stops。
本文足够详尽地讲解了webkit核心浏览器下的gradient渐变的使用，提供代码示例和截图示例，希望能对您的学习有所帮助。
纯CSS实现易拉罐3D滚动效果
2010年03月29日，星期一本文展示并讲解纯CSS实现的超炫超酷的易拉罐3D滚动效果，向您展示CSS的惊人潜力。效果简述为：横向移动滚动条，易拉罐随着滚动条的滚动，自身也进行着效果逼真的3D滚动。
本文提供丰富的插图以及必要的demo页面，希望能对您的学习有所帮助。
我的应用
我的应用