CSS webkit 图像遮罩不起作用

Question

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

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

CSS 使用渐变

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

Answer 1

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

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

这是相对烦人的，因为浏览器可以使用该file://协议在本地加载图像没有问题。关于Mozilla bugzilla 的讨论表明，新功能（例如mask-image）正在受到 CORS 保护，但现有功能（例如<img src）则不受保护，但没有真正的韵律或理由。