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

- ankles

Answer 1

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

Firefox和Chrome（以及其他浏览器）在使用file://协议访问HTML文件时，尝试应用遮罩时会静默失败。相反，您将完全看不到CSS元素的遮罩效果（即它消失了，但仍占据屏幕上的空间）。要解决此问题，您需要通过localhost://打开页面（例如，使用本地Apache服务器），或将其上传到远程服务器并从那里进行测试。

这相对令人恼火，因为浏览器可以使用file://协议轻松加载本地图片。在Mozilla bugzilla上的讨论表明，CORS保护新功能（如mask-image），但不保护现有功能（如<img src），但没有真正的原因或理由来解释这种情况。

- abbm

---

2020年相关答案。只在本地服务器上提供服务 - 面具加载得非常好。 - MajeStic

Answer 2

您的解决方案似乎可以直接使用。

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 浏览器上运行。

- Armel Larcier

---

我在 Chrome 和 Safari 上尝试使用它，但是它不显示。似乎其他使用该属性的网站可以正常显示 - 就像 fiddle 网站上一样。我想知道是否有其他 CSS 属性继承干扰了它？那个 fiddle 网站看起来很适合测试和找出问题所在。 - ankles

随意尝试！;-) 如果您喜欢，请点赞。 - Armel Larcier