CODEWITHSUNDEEP
htmlcssimageimage-masking
weegee
weegee

Reputation: 3399

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

I have a SVG and I'd like to change its color to red on some event, but you can't do that with SVG as a background-image, so you have to use CSS image-mask. I'm using PHP to echo my CSS onto the style attribute of the div:

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

Like 

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

This works as expected but returns a repeated image of the same SVG. So the solution would be to add no-repeat at last like this:

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

This in return gives me a div full of red color and you can't see the icon like 

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

Is this a bug? What could be the solution?

Upvotes: 6

Views: 6040

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

no-repeat is not a valid command for the mask-image property as seen in the documentation. Instead you should use the mask-repeat property like so:

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

Otherwise you can use the mask property 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>

Upvotes: 8

Related Questions