为什么 CSS mask-image 不能使用 no-repeat？

Question

我有一个 SVG，我想在某些事件中将它的颜色更改为红色，但是你不能将 SVG 用作背景图像，所以你必须使用 CSS image-mask。我正在使用 PHP 将我的 CSS 回显到 div:

的样式属性

$jfid = "background-color:red;
        -webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg);
         mask-image:url(../like_icons/" . $iconfgg . ".svg)";

喜欢

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts{
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask-image:url(https://svgshare.com/i/CB7.svg);
  mask-image:url(https://svgshare.com/i/CB7.svg) 
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

这按预期工作，但 return 是同一 SVG 的重复图像。所以解决方案是最后添加 no-repeat 像这样：

$jfid = "background-color:red;
         -webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat;
         mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat";

return 中的这个给了我一个 div 的红色，你看不到像

这样的图标

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts{
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat;
  mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

这是一个错误吗？可能的解决方案是什么？

Answer 1

no-repeat 不是 mask-image 属性的有效命令，如 the documentation. Instead you should use the mask-repeat attribute 中所示：

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts {
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask-image: url(https://svgshare.com/i/CB7.svg);
  mask-image: url(https://svgshare.com/i/CB7.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

否则你可以使用 mask attribute shorthand:

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts {
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask: url(https://svgshare.com/i/CB7.svg) no-repeat;
  mask: url(https://svgshare.com/i/CB7.svg) no-repeat;
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

为什么 CSS mask-image 不能使用 no-repeat？

Why is CSS mask-image not working with no-repeat?

html

css

image

image-masking