词拼贴画与CSS的

Question

目标：我想创建一个间距很小的单词拼贴，以便半显示背景图片。类似于this但有文字的东西。

问题：每当我将图像添加到文本的背景中时，它都会以文本格式混淆

.body-container{
	padding: 0;
	margin: 0;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.body-container h1{
	padding: 0;
	margin: 0;

	left:0;
	top:0;
	width: 100%;
	height: 100%;

	display: inline-block;
    font-size: 35px;
    line-height: 34px;
    height: 35px;

    
 	background: url(path/to/image) no-repeat;
	-webkit-background-clip: text;
}

<div class='container body-container'>
		<h1>Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite </h1>

	</div>

Answer 1

这是因为你给了h1 35px的高度。删除它，它可以添加-webkit-text-fill-color: transparent;。我相信你也不需要h1上的height:100%。

.body-container{
	padding: 0;
	margin: 0;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	background-color: #fff;
}
.body-container h1{
	padding: 0;
	margin: 0;
  height:100%;
	left:0;
	top:0;
	width: 100%;

	display: inline-block;
    font-size: 35px;
    line-height: 34px;

    -webkit-text-fill-color: transparent;
 	background: url(http://fillmurray.com/460/300) no-repeat;
	-webkit-background-clip: text;
}

<div class='container body-container'>
		<h1>Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite </h1>

	</div>