Question

我找到了一个我正在考虑用于我的网站的开源项目但是该项目已经死了，并不完全兼容浏览器。作为一名网络开发人员，我很难理解如何修复它。问题在于-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上看到了掩码和掩码图像的文档。我认为这是答案，但我无法让它正常工作。

提前感谢您的帮助。

Answer 1

Firefox不支持mask-image。这是一个非标准，所以不确定它何时会是。因此，您应该寻找其他解决方案，例如background-image或内联<img> - 代码。

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的参考。更具体地说，https://www.w3.org/TR/2014/WD-css-masking-1-20140213/#the-mask-image。

CSS：Firefox上的-webkit-mask-image

3 个答案:

实施例