Css 如何在firefox中使用透明图像和svg显示过滤后的/webkitFilter矩阵颜色？_Css_Firefox_Svg_Filter_Transparent

Css 如何在firefox中使用透明图像和svg显示过滤后的/webkitFilter矩阵颜色？

css firefox svg filter

Css 如何在firefox中使用透明图像和svg显示过滤后的/webkitFilter矩阵颜色？,css,firefox,svg,filter,transparent,Css,Firefox,Svg,Filter,Transparent,此示例适用于Chrome，但不适用于Firefox： https://plnkr.co/edit/A25mfRcrOThRQzoI?open=lib%2Fscript.js&preview 有人知道为什么我的例子不支持这一点吗？也许我使用Firefox时也做错了什么我只想让一张黑色/透明的图片上色，并将此图像覆盖在另一张默认图像上我的目标是在原来的彩色图片上有一个黑色/透明的形状 CSS: .profileA { display: inline-block; max-wi

此示例适用于Chrome，但不适用于Firefox：

https://plnkr.co/edit/A25mfRcrOThRQzoI?open=lib%2Fscript.js&preview

有人知道为什么我的例子不支持这一点吗？也许我使用Firefox时也做错了什么

我只想让一张黑色/透明的图片上色，并将此图像覆盖在另一张默认图像上

我的目标是在原来的彩色图片上有一个黑色/透明的形状

CSS:

.profileA {
  display: inline-block;
  max-width: 80%;
}
.profileB {
  position: absolute;
  width: 400px;
  height: auto;
  -webkit-filter: url(#monochrome);
  filter:  url(#monochrome);
}
body {
  background-color: blue;
}

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <svg class="defs-only" display="none">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="0.50 0 0 0 0.00
              0.00 0 0 0 0.60  
              0.00 0 0 0 0.00 
              0.00 0 0 1 0.00" />
  </filter>
</svg>
<a class="profileA" href="#">
  <img class="profileB" src="data:image/png;base64, ..."/></a>
<a class="profileA" href="#">
  <img class="profileB" src="https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png"/></a>


  </body>
</html>

HTML:

.profileA {
  display: inline-block;
  max-width: 80%;
}
.profileB {
  position: absolute;
  width: 400px;
  height: auto;
  -webkit-filter: url(#monochrome);
  filter:  url(#monochrome);
}
body {
  background-color: blue;
}

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <svg class="defs-only" display="none">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="0.50 0 0 0 0.00
              0.00 0 0 0 0.60  
              0.00 0 0 0 0.00 
              0.00 0 0 1 0.00" />
  </filter>
</svg>
<a class="profileA" href="#">
  <img class="profileB" src="data:image/png;base64, ..."/></a>
<a class="profileA" href="#">
  <img class="profileB" src="https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png"/></a>


  </body>
</html>

我找到了丢失的零件

display: none

使用svg时，chrome的行为不同，firefox也禁用了功能部分

我现在使用的

height:0相反
嗨——这个链接是指向plnkr的，它显然应该伴随着代码。你能把你试过的东西贴出来吗？当然，我在这里加了一些代码