ps制作20种特效文字_使用HTML5和CSS3制作遮罩文字特效

遮罩文字特效指的是文字下面的图片被文字层遮挡住，图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。

现在，Webkit内核的浏览器支持CSS3的background-clip属性，它能够完成和photoshop相同的文字遮罩效果。

另外，还可以使用CSS3 mask-image 属性来完成同样的效果。

Background-Clip属性创建遮罩文字特效效果如下：

TML代码如下：

使用HTML5和CSS3制作遮罩文字特效|DEMO1_web前端开发_专注web前端领域的学习与优质资源的分享

使用HTML5和CSS3制作遮罩文字特效 web前端开发-www.webqdkf.com

web前端开发 返回下载页

Background-Clip Mask-Image

前端开发

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前端开发 返回下载页

Background-Clip Mask-Image

web前端开发
web前端开发

  

这个在CSS中，简单的设置一些基本的CSS样式，然后通过-webkit-mask-image属性来为文字设置图片纹理。

完整的源码下载地址：

https://tc5.us/file/21793581-403021450