html - 文字图案叠加

Question

我想用图案覆盖文本。

当前文本:

期望的结果:

这是我尝试过的:

<p style="background: url(http://i.imgur.com/kODqYvS.jpg);>International experiance</p>

图案图片直接链接:

http://i.imgur.com/kODqYvS.jpg

Answer 1

给你，正是你想要的:DEMO

<p class="bnd">International experiance</p>

.bnd 
{
    font-size: 48px;   
    font-weight: bold;
    background: url(http://i.imgur.com/kODqYvS.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}