在文本内显示和图像

Question

假设我有一个这样的图像：

我想显示透明字母并填充所有内容，使其看起来像这样：

更新：我想显示一个带有图片的文本，看起来像这样：

如何使用 CSS 完成此操作？预先谢谢你！

Answer 1

使用css background-clip属性。

示例代码：

h1 {
    color: white;  /* Fallback: assume this color ON TOP of image */
    background: url('https://i.stack.imgur.com/QqRWG.jpg') no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 200px;
}

<h1>404</h1>

希望有帮助！

Answer 2

您应该尝试使用CSS“ mix-blend-mode”

在您的情况下，css将如下所示：

  background-color: #fff;
  color: #000;
  mix-blend-mode: screen;

您可以查看演示：

body{
  background: url('https://i.stack.imgur.com/QqRWG.jpg')
}
p{
  background-color: #fff;
  color: #000;
  mix-blend-mode: screen;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: arial;
  font-size: 10em;
  margin: 0;
  line-height: 100vh;
  text-align: center;
}

<p>404</p>

Answer 3

CSS具有background-clip用于这种样式：

  

文本

     

背景是在前景文本中绘制（剪切）的。

flex和calc之间的background-clip可以做一个简单的404错误页面：

h1 {
  background:url(https://i.stack.imgur.com/QqRWG.jpg) center;
  color:transparent;
  background-clip:text;
  /* makup for a basic 404 page */
  font-size:calc(15vh + 15vw);
  display:flex;
  height:100vh;
  align-items:center;
  justify-content:center;
}
* {
  margin:0;
}

<h1>404</h1>