Html 消毒剂：消毒剂掩码图像不工作

为元素提供背景图像时，一切正常：

<div [style.background-image]="sanitizedStyleValue"></div>

但是如何为元素提供遮罩图像？这：

<div [style.mask-image]="sanitizedStyleValue"></div>

它不起作用。也

<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>

不起作用。我甚至没有收到控制台上的警告

这是因为DomSanitarizer不知道mask Image的存在权，还是有其他方法可以实现这一点

上下文 我想创建一个IconComponent，在这里我可以

Input（）

一个图标名，它将用作掩码图像url的一部分。另一个

Input（）

保存背景色。这样，我可以用不同的颜色组合不同的图标

---

我想阻止为每个可能的图标创建CSS类。

试试这个：-

[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"

根据，要使CSS掩码与chrome一起工作，您需要在规则前面加上

-webkit-

所以这应该管用

<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>

注意：根据，用于掩码的图像必须返回正确的CORS标题

用户代理必须使用[HTML5]规范为all定义的可能启用CORS的获取方法，以及掩码图像、掩码边框源和剪辑路径属性上的值。获取时，用户代理必须使用“匿名”模式，将引用源设置为样式表的URL，并将源设置为包含文档的URL。如果这导致网络错误，其效果就好像没有指定值一样

---

尝试下面的答案，如果不起作用，请提供stackblitz。您能告诉我们控制台中的警告是什么吗？可能是Cors警告？控制台上根本没有警告。对不起，我误读了你关于警告的帖子。试试

这是唯一一种CSS方法，显然是有效的。但是我想动态地将掩码图像设置为IconComponent的自定义输入（）。更新问题。但无论如何，谢谢。sanitizedStyleValue中有什么？