在色的背景的透明文本在CSS

Question

是否可以在div / span / etc中显示带有彩色背景和透明字符CSS的文本？我附上了一张图片来简单展示我想做的事情。

我的HTML代码：

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

我的CSS代码：

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

Answer 1

你可以使用SVG，它需要一些额外的调整：svg的宽度，以便查看所有文本，设置与背景相同的背景图案。

SVG文本还没有换行（svg 2.0应该）。

唯一的好处是它支持Firefox时background-clip：text;没有。

<强> DEMO

HTML + SVG内联内容：   

</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>

将CSS关联到演示：

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

一种选择是使用-webkit-background-clip。

CSS-tricks article "Show Image Under Text"为您提供了一些不错的选择。

Answer 3

检查出来：http://www.w3schools.com/cssref/css3_pr_background-clip.asp（正如@Josh提到的，http://css-tricks.com/image-under-text/）

看起来它得到了很好的支持（至少使用最新的浏览器）