简体   繁体   中英

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?

no-repeat is not a valid command for the mask-image attribute as seen in the documentation . Instead you should use the mask-repeat attribute 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 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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM