Question

我有一个SVG，并且想在某些事件中将其颜色更改为红色，但是您不能将SVG作为背景图像使用，因此您必须使用CSS image-mask。我正在使用PHP将我的CSS回显到div的style属性上：

$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>

这可以按预期工作，但返回相同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";

作为回报，这给了我一个充满红色的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所示。相反，您应该像这样使用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的速记：

.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遮罩图像无法重复使用？

1 个答案: