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

Question

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

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