Question

我想创建这样的东西：

header {
  height: 2000px;
}

h1 {
  font-size: 10em;
  color: white;
  background-image: url('https://images.pexels.com/photos/1104509/pexels-photo-1104509.jpeg?cs=srgb&dl=green-leaves-plant-1104509.jpg&fm=jpg');
  background-attachment: fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

<header>
  <h1>Hello World!</h1>
</header>

但是我希望更好的浏览器支持... -webkit样式不能很好地转换。还有其他CSS方法吗？还是被JavaScript卡住了？

Answer 1

background-clip具有很好的浏览器支持。对于仅搜索css替代方法的任何人，以下是使用mix-blend-mode的示例，但截至此回答之日，浏览器支持比background-clip受限制（因此，如果您在Edge或IE上运行以下代码段，我不确定您会看到什么，但是您应该能够在这些浏览器上的问题中运行OP的代码段。

header {
  background-image: url('https://images.pexels.com/photos/1104509/pexels-photo-1104509.jpeg?cs=srgb&dl=green-leaves-plant-1104509.jpg&fm=jpg');
  background-attachment: fixed;
  height: 2000px;
}

h1 {
  margin: 0;
  background-color: white;
  color: black;
  font-size: 10em;
  height: 2000px;
  mix-blend-mode: screen;
}

<header>
  <h1>Hello World!</h1>
</header>

带有背景图像的透明文本

1 个答案: