CSS：Firefox 上的-webkit-mask-image

Question

我找到了一个开源项目，我正考虑将其用于我的网站，但该项目已失效，并且不完全跨浏览器兼容。作为网络开发人员菜鸟，我对如何修复它感到困惑。问题在于 -webkit-mask-image，根据 MDN，它是非标准的，因此在 Firefox 上不受支持。

Here is the project on github and here 是代码的现场演示。

问题出在页面导航上。具体来说，这是有问题的代码块。这在 Chrome 和 Safari 上运行良好。不适用于 Firefox。

<button id="btn1" class="active" data-vin="view-home">
    <div class="btn-icon" style="-webkit-mask-image:url(img/icons/user.svg);"></div>
    <div class="label">Home</div>
</button>

有什么想法可以修改它以在 Firefox 上运行吗？我在 MDN 上看到有关掩码和掩码图像的文档。我认为这是答案，但我无法使其正常工作。

预先感谢您的帮助。

Answer 1

Firefox 不支持遮罩图像。这是一个非标准的，所以不确定什么时候会是。因此，您可能应该寻找其他解决方案，例如 background-image 或内联 <img>-tag.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image#Browser_compatibility

Answer 2

无需 CSS 遮罩且无需更改图像即可获得相同的外观。这些图像是 SVG，因此如果您在浏览器中打开它们并查看源代码，您将获得 SVG 代码：

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-374.2178,-62.2364)">
      <path d="m775.103,428.4798c-67.1319,-24.4562 -88.5923,-45.0996 -88.5923,-89.3004 0,-26.526 21.9961,-43.717 29.4945,-66.4511 7.4984,-22.7341 11.8362,-49.6496 15.4417,-69.2289 3.6055,-19.5793 5.0383,-27.1523 6.9992,-48.0136 2.3966,-26.0357 -15.0332,-93.2494 -108.2281,-93.2494 -93.1677,0 -110.6519,67.2136 -108.2009,93.2494 1.9609,20.8613 3.4014,28.4349 6.9992,48.0136 3.5978,19.5788 7.8935,46.4934 15.3872,69.2289 7.4937,22.7355 29.5217,39.9251 29.5217,66.4511 0,44.2009 -21.4604,64.8443 -88.5923,89.3004 -67.377,24.5106 -111.1149,48.6808 -111.1149,65.7566 0,17.0485 0,80 0,80l512,0c0,0 0,-62.9515 0,-80 0,-17.0485 -43.7651,-41.2187 -111.1148,-65.7566z"
      />
    </g>
</svg>

要跨浏览器工作，您现在可以将该代码插入您的按钮并使用 fill CSS 属性.

为其着色

例子

button {
  border: none;
  background: none;
  height: 64px;
  width: 64px;
  fill: #6F6F74;
  outline: none;
}
button.selected svg {
  fill: #318CFA;
}
button:hover svg {
  fill: red;
}

<button id="btn1" class="active selected" data-vin="view-home">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-374.2178,-62.2364)">
      <path d="m775.103,428.4798c-67.1319,-24.4562 -88.5923,-45.0996 -88.5923,-89.3004 0,-26.526 21.9961,-43.717 29.4945,-66.4511 7.4984,-22.7341 11.8362,-49.6496 15.4417,-69.2289 3.6055,-19.5793 5.0383,-27.1523 6.9992,-48.0136 2.3966,-26.0357 -15.0332,-93.2494 -108.2281,-93.2494 -93.1677,0 -110.6519,67.2136 -108.2009,93.2494 1.9609,20.8613 3.4014,28.4349 6.9992,48.0136 3.5978,19.5788 7.8935,46.4934 15.3872,69.2289 7.4937,22.7355 29.5217,39.9251 29.5217,66.4511 0,44.2009 -21.4604,64.8443 -88.5923,89.3004 -67.377,24.5106 -111.1149,48.6808 -111.1149,65.7566 0,17.0485 0,80 0,80l512,0c0,0 0,-62.9515 0,-80 0,-17.0485 -43.7651,-41.2187 -111.1148,-65.7566z"
      />
    </g>
  </svg>
  Selected
</button>

<button id="btn1" class="active" data-vin="view-home">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-374.2178,-62.2364)">
      <path d="m775.103,428.4798c-67.1319,-24.4562 -88.5923,-45.0996 -88.5923,-89.3004 0,-26.526 21.9961,-43.717 29.4945,-66.4511 7.4984,-22.7341 11.8362,-49.6496 15.4417,-69.2289 3.6055,-19.5793 5.0383,-27.1523 6.9992,-48.0136 2.3966,-26.0357 -15.0332,-93.2494 -108.2281,-93.2494 -93.1677,0 -110.6519,67.2136 -108.2009,93.2494 1.9609,20.8613 3.4014,28.4349 6.9992,48.0136 3.5978,19.5788 7.8935,46.4934 15.3872,69.2289 7.4937,22.7355 29.5217,39.9251 29.5217,66.4511 0,44.2009 -21.4604,64.8443 -88.5923,89.3004 -67.377,24.5106 -111.1149,48.6808 -111.1149,65.7566 0,17.0485 0,80 0,80l512,0c0,0 0,-62.9515 0,-80 0,-17.0485 -43.7651,-41.2187 -111.1148,-65.7566z"
      />
    </g>
  </svg>
  Not selected
</button>

Answer 3

SVG 元素的 SVG 掩码，支持所有浏览器。

<mask id="masking" maskUnits="objectBoundingBox" 
  maskContentUnits="objectBoundingBox">
  <rect y="0" width="1" height="1" fill="url(#gradient)" />
  <circle cx=".5" cy=".5" r=".4" fill="gray" />
  <circle cx=".5" cy=".5" r=".3" fill="white" />
  ...
</mask>

.item {
  mask: url(#masking);
  }

引用自http://codepen.io/yoksel/pen/fsdbu . For more specific, https://www.w3.org/TR/2014/WD-css-masking-1-20140213/#the-mask-image。

CSS：Firefox 上的-webkit-mask-image

CSS: -webkit-mask-image on Firefox

html

css

firefox

mask

例子