查看DEMO 下载源码
我想，未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性，这些我们以前都只能是想想而已。例如，我们现在有很多方法可以用来创建包含动态填充的文本。
大约在一年前， Sara Soueidan 写的一篇关于 创建纹理文本技术 的文章，在Codrops上发表了。这篇精彩的文章将告诉你所有关于创建不同纹理文本的方法，使用一些现代的Web技术，包括canvas。
我对于这个话题非常感兴趣，但是是从一个不同的角度来看。我有以下的几个问题：添加的文本填充可以是动态的吗？我们可以给文本添加动态的阴影或者渐变吗？或者使用视频来填充文本？
在这篇文章中，我将分享我的几个试验，以及五个创建图案填充文本的方法。这五种情况中的三种，我们将保留文本可选中的能力。当然我们是希望每一种情况都是文本可选中的，但是使用一些变通的方法，我们也是可以解决这个问题的。
对于每种技术，我都会给出其浏览器支持情况，选中文本的能力，以及添加动态填充的可能性（高度实验）。
在这里我不会把所有的代码都放进来，只放一些最重要的部分，但是你可以在下载的文件中找到所有的代码，然后自己进行试验。
好了，开始吧。
注意：有一些技术是实验性的，并不能在工作在所有的浏览器中。所以要看清楚每一节内容前面的浏览器支持情况。IE能支持的非常少。
使用 background-clip: text
浏览器支持：Chrome支持，Firefox不支持，IE不支持，Safari支持，Opera支持。
这是大家脑海中最直接能想到的方法，尽管 background-clip: text 目前只在基于webkit的浏览器中支持，只需要添加前缀 -webkit- 。
注意：这一节中的demo只能在Chrome、Opera和Safari中工作。
标签如下：
Text
查看更多关于如何创建（动态的）文本填充_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110672