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