带背景图像的透明文本

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>