详解：45 background-clip text-fill-color
详解：45 background-clip text-fill-color
贵哥的编程之路
发布于 2020-10-28 15:23:46
发布于 2020-10-28 15:23:46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
.cool-text{
width: 800px;
margin:30px auto;
background:url(images/queen1.jpeg) repeat;
font-size:196px;
font-weight: bold;
-webkit-background-clip: text;/*使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉
*/
-webkit-text-fill-color: transparent;/*制作流光文字有几个要点：text-fill-color一般设置为transparent（透明色）*/
}
</style>
</head>
<body>
<div class='cool-text'>
<p>Mr.King</p>
<p>Mr.Queen</p>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读