CSS：Firefox 上的 -webkit-mask-image答案

【问题标题】：CSS: -webkit-mask-image on FirefoxCSS：Firefox 上的 -webkit-mask-image
【发布时间】：2016-02-24 11:24:22
【问题描述】：

我找到了一个我正在考虑将其用于我的网站的开源项目但是该项目已死并且它不完全跨浏览器兼容。作为一个网络开发新手，我很难过如何解决它。问题在于 -webkit-mask-image，根据 MDN，它是非标准的，因此在 Firefox 上不受支持。

Here 是 github 上的项目，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 上看到了有关 mask 和 mask-image 的文档。我认为这是答案，但我无法让它正常工作。

提前感谢您的帮助。

【问题讨论】：

标签： html css firefox mask

【解决方案1】：

您可以在不使用 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>

【讨论】：

不能说我喜欢将 svg 的内容直接粘贴到代码中的想法，但它似乎大部分都有效。当您更改所选按钮时，按钮外部留下的蓝色边框是怎么回事？
@DizzyBay - 没有那么干净，这是真的。在这种情况下，它似乎用于三个按钮，并且标记将易于维护。使用 `outline: none;` 在按钮上单击时删除蓝色轮廓（我添加到示例中）
@DizzyBay 使用这种技术的一种更简洁的方法是使用 svg 符号：css-tricks.com/svg-symbol-good-choice-icons
@misterManSam 啊，看起来好多了。今晚晚些时候我回家时让我玩一下，看看这是否可行。
抱歉耽搁了……我终于能够让这个解决方案在我的网站上运行。我不喜欢这个解决方案（在网页中嵌入 svg 内容），但它确实解决了问题。感谢您的帮助。

【解决方案2】：

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

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

【讨论】：

哦，是的...我忘了我确实看到 mask-image 也是非标准的。感谢您的提醒。我简要研究了这种方法（使用 background-image 或标签），但不确定如何获得所需的效果（无需编写一堆 javascript 代码）。你能澄清更多吗？

【解决方案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 的引用。更具体的，https://www.w3.org/TR/2014/WD-css-masking-1-20140213/#the-mask-image。

【讨论】：