How to get a pattern into a written text via CSS?

问题:

some days ago I saw a website where a written text had a background-image in.

Is it already possible with CSS to get a background-image into a text?

I do not want a background-image behind the text. I have no idea to achieve this. :(

Thanks gago!

http://img221.imageshack.us/img221/232/examplewf.png

回答1:

@gago; you can use css3 background clip proprty.

for example css:

p {
   color: white;
   background: url(images/fire.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

check this link for more http://css-tricks.com/7850-image-under-text/

回答2:

-webkit-background-clip does the job

HTML

   <header>
      <h3><span>B</span><span>Brainz:: An   Amazing Touch</span></h3>
  </header>

CSS

    header span:first-child
    {
     font-size: 7em;
     color: white;
     background: url("strip.png") repeat center center;
     background-size: 6px 6px;
      background-clip: content-box;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
    }

View result

This method is only supported by webkit browsers which means you must set a color property and background-clip as content-box incase it fails in a non-webkit browser

回答3:

The example image that you have Could be achieved with a font that has such a pattern in it. For that you would need to use css @font-face or some other way of using custom fonts.

---

Aside from that I'd say that your only option is to make image of a text with a specific background/styling.