详解：45 background-clip text-fill-color

贵哥的编程之路(热爱分享)

于 2020-07-26 00:51:12 发布

阅读量721

点赞数 2

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/107588148

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

<!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>