使用HTML5和CSS3制作遮罩文字特效
本文共 1500 字，大约阅读时间需要 5 分钟。
遮罩文字特效指的是文字下面的图片被文字层遮挡住，图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。
现在，Webkit内核的浏览器支持CSS3的background-clip属性，它能够完成和photoshop相同的文字遮罩效果。
另外，还可以使用CSS3 mask-image 属性来完成同样的效果。
Background-Clip属性创建遮罩文字特效效果如下：
TML代码如下：
使用HTML5和CSS3制作遮罩文字特效|DEMO1_web前端开发_专注web前端领域的学习与优质资源的分享 使用HTML5和CSS3制作遮罩文字特效 web前端开发-www.webqdkf.com
前端开发
www.webqdkf.com
Background-Clip属性创建遮罩文字的效果，主要是在CSS代码中，将使用background-clip属性来剪裁文本。对两个div元素分别使用不同的背景图片，并通过webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色。
Mask-Image属性创建遮罩文字特效截图效果如下：
HTML代码如下：
使用HTML5和CSS3制作遮罩文字特效|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库 使用HTML5和CSS3制作遮罩文字特效 web前端开发-www.webqdkf.com
web前端开发web前端开发
这个在CSS中，简单的设置一些基本的CSS样式，然后通过-webkit-mask-image属性来为文字设置图片纹理。
完整的源码下载地址：
https://tc5.us/file/21793581-403021450
转载地址：http://hyfpi.baihongyu.com/
你可能感兴趣的文章
SQL查询初学者指南读书笔记(二)创建SQL查询
查看>>
SQL查询初学者指南读书笔记(三)值表达式
查看>>
SQL查询初学者指南读书笔记(四)where从句
查看>>
SQL查询初学者指南读书笔记(五)集合操作与多表查询介绍
查看>>
ReSIProcate之编译、安装、配置、运行、测试proxy
查看>>
如何使用SIPp测试ReSIProcate的Proxy
查看>>
JFanal框架介绍
查看>>
充满梦想的log4net探索之旅
查看>>
onenote未响应
查看>>
谈谈工作的积累
查看>>
waveInReset/waveOutReset死锁原因与解决方案
查看>>
Win32 SDK值得注意的地方
查看>>
STL之定义自己的判断式(predicate)作为算法的参数
查看>>
Application Verifier添加repro之后产生的问题
查看>>
RFC 3261摘录
查看>>
RFC 3261与Resiprocate对照参考
查看>>
Mysql 断开连接之后自动重新连接
查看>>
指针、字符串与整型数据类型的转换
查看>>
C/C++壳与汇编壳的不同以及DLL壳相对于EXE壳的难点
查看>>
64位编程
查看>>