最近看了文章发现css3中的 background-clip 可以用来制作遮罩文字特效,我做的是给文字加上纹理效果,如下:
- html代码如下:
<div class="clip">
<h1>hello world</h1>
</div>
- css 代码如下:
.clip h1 {
background: url(http://www.colbrus.com/wp-content/uploads/2018/10/wenli.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 100px;
font-family: Anton, sans-serif;
text-align: center;
text-shadow: 0 0 1px rgba(0,0,0,.1);
line-height: 130px;
}
在CSS代码中,将使用background-clip属性来剪裁文本。对两个div元素分别使用不同的背景图片,并通过webkit-text-fill-color属性设置为transparent,确保文字的填充色为透明色。