如何制作“透视”文字？

Question

我的body background-image和div background-color为白色。

我正在尝试将div（称为#content）上的文字透视，以便文本就像是指向网站背景的窗口。

以下是一个例子：

Answer 1

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

以下是一个例子：

＆＃13;

＆＃13;

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

＆＃13;

<h1><span>NEW YORK</span></h1>

＆＃13;

＆＃13;

＆＃13;

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