CSS webkit 图像蒙版不起作用

Question

我正在尝试按照一些关于应用蒙版的教程进行操作，但是每当我对我的 h1 应用任何内容时，所有文本都会完全消失。我试过使用图像蒙版和渐变，但同样的事情发生了。

<h1 id="site-name">
    <a href="/" title="Home"><span>The Biospheric Project</span></a>
</h1>

CSS 使用渐变

h1 { 
    -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,1)),
    to(rgba(0,0,0,.2)));
    text-shadow: 0px 0px 30px rgba(30, 28, 28, 0.6);
}

Answer 1

问题是使用 file:// 访问您的页面而不是 https://

如果您使用 file:// 访问您的 HTML 文件，Firefox 和 Chrome(可能还有其他)将在尝试应用掩码时悄无声息地失败。协议(protocol)。相反，您会看到整个 CSS 元素被完全屏蔽(即它消失了，但它仍然占据屏幕上的空间)。要修复它，您需要通过 localhost:// 打开您的页面(例如，使用本地 Apache 服务器)或上传到您的远程服务器并从那里进行测试。

这比较烦人，因为浏览器可以使用 file:// 在本地加载图像没有问题。协议(protocol)。关于 Mozilla bugzilla 的讨论表明新功能(如 mask-image )受到 CORS 保护，但现有功能(如 <img src )不 protected ，但没有真正的押韵或理由。