CSS文字遮罩效果

-webkit-background-clip:text

你可以通过使用 -webkit-background-clip:text 将文字之外的区域都将被裁剪掉

本篇文章的标题就使用了此效果

Demo

<style type="text/css">
h1 {
    background-image:url(https://img.uncode.top/images/2020/07/25/2Tj.jpg);
    background-position-y:80%;
    -webkit-background-clip:text;
}
</style>

<h1>测试文字 测试文字</h1>

但是……运行效果是这样的:img

别忘了文字是带颜色的,所以我们需要用color: transparent把文字颜色设置成透明:

<style type="text/css">
h1 {
    background-image:url(https://img.uncode.top/images/2020/07/25/2Tj.jpg);
    background-position-y:80%;
    -webkit-background-clip:text;
    color: transparent;
}
</style>

<h1>测试文字 测试文字</h1>

这样就对了:img2


知识共享许可协议

本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可


添加新评论

OwO        

支持Markdown和LaTeX数学公式,请输入正确的邮件地址以接收回复

Loading VAPTCHA...