如何制作“透视”文字？答案

【问题标题】：How to make "see through" text?如何制作“透视”文字？
【发布时间】：2014-12-25 20:47:19
【问题描述】：

我有一个body 和一个background-image 和一个div 和background-color 为白色。

我正在尝试让div（称为#content）上的文字透明，使文字就像网站背景的窗口。

这是一个例子：

【问题讨论】：

你试过opacity:.4吗？
他希望文本是透明的。你解决方案只会让背景更明显。
@KaiQing 那行不通，看他的例子。 CSS 掩码是正确的方法。

标签： html css

【解决方案1】：

使用 CSS 可以实现您想要实现的目标。使用background-clip: text，您可以为文本使用背景，但您必须将其与页面背景对齐。

这是一个例子：

body {
  background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
  margin: 10px;
  background-position: center top;
}
h1 {
  background-color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-family: arial;
  font-size: 83px;
  margin: 450px 0px 0px 0px; 
}
span {
  background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: block;
  background-position: center -450px;
}

&lt;h1&gt;&lt;span&gt;NEW YORK&lt;/span&gt;&lt;/h1&gt;

【讨论】：

你确定 background-clip: text 是 CSS3 而不是 webkit 扩展？ spec 没有将text 列为background-clip 的可能值。
h1's color 不应该是 transparent，因为这样文本在非 webkit 浏览器上变得不可见。而 webkit 浏览器不需要它，因为它们有 -webkit-text-fill-color: transparent。

【解决方案2】：

尝试为您的#content 剪辑，分配相同的背景文件（最终需要重新定位）：

#content {
 color: rgba(255,255,255,.5);  /* Fallback: assume this color ON TOP of image */
 background: url(image.jpg) no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

来源：http://css-tricks.com/image-under-text/

【讨论】：

但我确实通过你的例子看到了他实际要求的内容，所以再加上一个