遮罩文字特效指的是文字下面的图片被文字层遮挡住,图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。现在,Webkit内核的浏览器支持CSS3的background-clip属性,它能够完成和photoshop相同的文字遮罩效果。像谷歌、火狐、safari浏览器等主流浏览器,IE暂不支持。 另外,还可以使用CSS3 mask-image 属性来完成同样的效果。
效果一 使用Webkit Background-Clip属性创建遮罩文字
效果二 使用Webkit Mask-Image属性创建遮罩文字
首页 /  web前端 /  css3 / 使用HTML5和CSS3制作遮罩文字特效

0 0 94

使用HTML5和CSS3制作遮罩文字特效

遮罩文字特效指的是文字下面的图片被文字层遮挡住,图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。现在,Webkit内核的浏览器支持CSS3的background-clip属性,它能够完成和photoshop相同的文字遮罩效果。像谷歌、火狐、safari浏览器等主流浏览器,IE暂不支持。 另外,还可以使用CSS3 mask-image 属性来完成同样的效果。
效果一 使用Webkit Background-Clip属性创建遮罩文字
效果二 使用Webkit Mask-Image属性创建遮罩文字

使用HTML5和CSS3制作遮罩文字特效_图一
使用HTML5和CSS3制作遮罩文字特效_图二
下载所需: 5金币 下载 演示

[来源] https://yuanmouren.erlyun.com/p.php?id=98

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

添加一条新回复
容若 2020-04-26 11:38
10
送花
20积分一朵