html - css 屏蔽以删除背景颜色

Question

有一些来 self 们不拥有的来源的实时计算图形图像，它们的白色背景与我们显示它们的位置不相称。有没有摆脱白色背景的 html/css 方法？ (在这种情况下，javascript 不是一个选项)

我正在查看 css 掩码 - 尝试将掩码图像设置为相同的图像，并将掩码模式设置为亮度 -

html:

<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >

CSS:

img {
  mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);  
  mask-mode: luminance;  
}

在我看来它应该起作用 - 但它实际上根本没有效果:(

Answer 1

首先你应该知道这个:https://caniuse.com/#search=mask

然后看看这个 fiddle :https://jsfiddle.net/9y27jaLh/1/

如 caniuse 中所述，部分支持 webkit，即前缀属性将起作用，例如 -webkit-mask-**