是否可以为带有 CSS3 的文本添加背景图像？

Question

我想在文本上添加 background-image，但我希望只有文本有背景图像，而不是所有 div

.class {
background-image: url('');
}

<div class="class">
 <p> Site Name </p>
</div>

但我不知道是否可行...我尝试过但没有成功我可以在 div 而不是文本

添加背景图像

也许我可以用

 background-clip

???

希望你能帮帮我...

对不起我的英语非常感谢！

Answer 1

这应该可以解决您的问题。

.class p{
    font-size:50pt;
    color: white;
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg') no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

现场演示https://jsfiddle.net/z2gcy5ym/1/

是否可以为带有 CSS3 的文本添加背景图像？

Is possible to add background-image for text with CSS3?

css

background-image