纯CSS3怎么给文本添加背景图

背景

添加背景图可以让文本更有趣味性和视觉效果，但一般都是利用CSS的属性background-image来实现。那么有没有一种纯CSS3的方法实现文本添加背景图呢？答案是肯定的，下面我们就来介绍这种方法。

实现方法

我们要使用CSS3的一个属性：background-clip，这个属性是用于规定背景的绘制区域的。默认值是border-box，即背景从border的外侧边缘开始绘制。但是我们可以将其设置为text，这样就可以让背景只在文本的区域内显示出来。

步骤

1.首先我们需要一个背景图，可以使用一个base64编码的图片，这样方便我们在代码中直接使用。

.bg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs 9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAAAQAAAADwAAAIYAAAC2bQG7AAAA5klEQVQY0 4XOMQoAIAxEUZ3U07BEKigA9oLF4TUwUW0wet2qNVHMOZ2JMxVJREcE3e9cgeVmvCo9XUWb4GPAtsWo AAAAElFTkSuQmCC);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

这段代码中，我们使用了一个已经base64编码好的图片作为背景，并给这个背景设置了一个class名为bg。接下来，我们要对bg应用background-clip属性，将其设置为text，这样背景就会固定在文本中间。

同时要注意，因为我们希望文本的颜色为透明，所以要将color设为transparent，让文本的颜色透明化。

2. 接下来，我们只要将对应的文本区域的class设置为bg即可，这个文本区域可以是一个span或者p等元素。

<p><span class="bg">这是一段背景图在文本中的例子</span></p>

效果

最终的效果如下：

总结

通过background-clip属性，我们可以很容易地实现在文本中添加背景图的效果，让文本内容更加生动有趣。