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;
}

Answer 2

フィドル

h1{color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(http://i.imgur.com/kODqYvS.jpg) ;
   -webkit-background-clip: text;
-webkit-text-fill-color: transparent;}