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

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

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

CSS webkit图像掩码不起作用

2 个答案: