实战小案例"/>
前端实战小案例
【转自】：
前端实战小案例--用图片做背景的文字显示效果
- 效果
- 知识点
- background-size: cover;
- -webkit-text-fill-color:transparent;
- -webkit-background-clip:text;
- 代码实现
效果
知识点
background-size: cover;
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
代码实现
<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>用图片做背景的文字显示效果</title><style type="text/css">html,body{margin: 0;padding: 0;background-color: #333;font-family: "Montserrat",sans-serif;}h1{font-size: 200px;font-weight: 800px;text-transform: uppercase;letter-spacing: 20px;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);margin: 0;background: url(test.jpg) 50% 50%;background-size: cover;/* 填充颜色随父元素 */-webkit-text-fill-color:transparent;/* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 */-webkit-background-clip:text;}</style></head><body><h1>test</h1></body>
</html>更多推荐
前端实战小案例
发布评论