<div class="div bg-clip">图片背景文字剪贴蒙版</div>
<br>
<div class="div bg-clip2">渐变背景文字剪贴蒙版</div>
<br>
<div class="div bg-clip3">剪贴蒙版动画效果</div>
.div{
		font-weight: bold;
    	font-size:60px;
    	margin: 10px 50px;
    	border: 10px dashed #666;
    
	}
	/*1*/
	.bg-clip{
		background-image: url(http://lc-yee5xnhu.cn-n1.lcfile.com/78cb08ed395dec020a3d.jpg);
		background-size: cover;
		-webkit-background-clip: text;
		background-clip: text;
		color:transparent;
	}
	/*2*/
	.bg-clip2{
		background:linear-gradient(
			90deg,
	        red 0%,
	        red 14.3%,
	        orange 0,
	        orange 28.6%,
	        yellow 0,
	        yellow 42.9%,
	        green 0,
	        green 57.2%,
	        blue 0,
	        blue 71.5%,
	        indigo 0,
	        indigo 85.8%,
	        violet 0,
	        violet 100%
        );
		background-size: cover;
		-webkit-background-clip: text;
		background-clip: text;
    	-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
	}
	/*3*/
	.bg-clip3{
    min-width:500px;
		background-image: linear-gradient(45deg, #ccc 0%, #ccc 30%, #00B4F1 0%, #00B4F1 70%, #ccc 0%, #ccc 100%);
		background-size: 35% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color:transparent;
		animation: aitf 8s linear infinite;
	}
	@keyframes aitf {
		0% { background-position: 0% 100%; }
		100% { background-position: 100% 100%; }
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.