<!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>
详解：45 background-clip text-fill-color
猜你喜欢
转载自blog.csdn.net/qq_37805832/article/details/107588148
今日推荐
周排行