CSS中彩色背景上的透明文本

Question

Is there possible to show some text in a div/span/etc with colored background AND transparent characters with CSS ? I attached an image to simply show what I want to do.

my HTML code:

<div id="container">
    <div id="textbox">this text is transparent</div>
</div>

my CSS code:

#container {
    display: block;
    width: 400px;
    height: 200px;
    background-image: url('...path/to/myimage.jpg');
}
#textbox {
    background: #000;
    color: transparent; /* ??? */
}

Answer 1

You can use SVG, it needs some extra to tuning: width of svg in order to see all text, set a background pattern same as background.

SVG text do not wrap yet (svg 2.0 should).

the only advantage is that it is supported by Firefox when background-clip:text; does not.

DEMO

HTML + SVG inline content:

</div>
  <svg height="5em" width="32em">
    <defs>
      <pattern id="textpattern" patternUnits="userSpaceOnUse" width="1000" height="1000" >
        <image xlink:href="http://lorempixel.com/600/300/nature/9" width="600" height="300"  x="-3em" y="-3em"/>
      </pattern>
    </defs>
    <text  y="1.2em" x="0.5em" >​this text is transparent</text>
  </svg>
</div>

Associated CSS to demo :

text {
  font-size:3em;
  fill:url(#textpattern) ;
}
svg {
  background:rgba(0,0,0,0.9);
  margin:2em 0 0 2em;
}
#container {
  padding:1em;
  background:url(http://lorempixel.com/600/300/nature/9) no-repeat;
}

Answer 2

One option is to use -webkit-background-clip .

CSS-tricks article "Show Image Under Text" gives you some good options.

Answer 3

Check this out: http://www.w3schools.com/cssref/css3_pr_background-clip.asp (and as @Josh mentioned, http://css-tricks.com/image-under-text/ )

Looks like that it's well supported (with the latest browsers at-least)