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（可能还有其他））将无提示地失败。相反，您会看到整个CSS元素被完全屏蔽掉了（即，它消失了，但仍在屏幕上占据了空间）。要修复它，您需要通过localhost://打开页面（例如，使用本地Apache服务器），或者上传到远程服务器并从那里进行测试。

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

Answer 2

您的解决方案似乎可以正常使用。