如何使“透视”文本？ [英] How to make "see through" text?

问题描述

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

c $ c> div （这被称为 #content ）透视，这样文本就像一个窗口到网站的背景。

I'm trying to make the text on that div (which is called #content) see through, so that the text is like a window to the background of the site.

以下是一个示例：

推荐答案

。使用 background-clip：text ，您可以为文本使用背景，但是您必须将其与页面背景对齐。

What you're trying to achieve is possible with CSS. With background-clip: text, you can use a background for the text but you will have to align it with the background of the page.

下面是一个例子：

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

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

这篇关于如何使“透视”文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！