2

我正在尝试遵循一些有关应用蒙版的教程，但是每当我将任何内容应用于我的 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);
}
4

2 回答 2

3

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

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

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

于 2020-01-08T05:29:29.210 回答
1

您的解决方案似乎按原样工作。

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);
}

看到这个小提琴：

http://jsfiddle.net/2crma/

当然它只能在 webkit 浏览器上运行。

于 2013-02-18T12:55:46.323 回答