文字图案叠加

时间:2013-06-30 19:44:33

标签: html css background overlay background-image

我想用模式覆盖文本。

当前文字:

期望的结果:

以下是我的尝试:

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

直接链接到模式图片:

  

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

2 个答案:

答案 0 :(得分:1)

Fiddle

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

答案 1 :(得分: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;
}