使用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/
你可能感兴趣的文章
启动 LocalDB 和连接到 LocalDB
查看>>
Palindrome Number --回文整数
查看>>
Reverse Integer--反转整数
查看>>
Container With Most Water --装最多水的容器（重）
查看>>
Longest Common Prefix -最长公共前缀
查看>>
Letter Combinations of a Phone Number
查看>>
Single Number II --出现一次的数（重）
查看>>
Valid Parentheses --括号匹配
查看>>
Remove Element--原地移除重复元素
查看>>
Remove Duplicates from Sorted Array--从有序数组中移除重复元素
查看>>
Count and Say
查看>>
Gas Station
查看>>
Palindrome Partitioning --回文切割 深搜(重重)
查看>>
Valid Palindrome 简单的回文判断
查看>>
Pascal's Triangle -- 生成杨辉三角
查看>>
Pascal's Triangle II 生成杨辉三角中的某行
查看>>
Minimum Depth of Binary Tree -- 二叉树的最小深度 DFS 加剪枝
查看>>
Climbing Stairs 爬楼梯方法 动态规划
查看>>
Merge Two Sorted Lists 合并两个有序链表
查看>>
pow(x,n) 为什么错这么多次
查看>>