Question

从我们不拥有的来源获得一些实时计算图形图像，并且它们的白色背景与我们显示它们的位置不相符。是否有任何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

90％的浏览器不支持

mask-mode，包括基于webkit的。

此外，“亮度”表示颜色较亮的区域将显示，而较暗的区域则不显示，而中间的整个渐变。所以它几乎与你所需要的完全相反。

如果只是改变背景颜色，可能会略微着色，可能是半透明覆盖。如果图像具有已知形状，您可以尝试使用SVG模式进行剪切/屏蔽..

或者可能试图破解它将图像设置为背景并搜索背景混合模式来实现这一点......等等。

但是无法将相同的图像作为遮罩应用来摆脱白色

Answer 2

首先，您应该知道：https://caniuse.com/#search=mask

然后看看这个小提琴：https://jsfiddle.net/9y27jaLh/1/

正如-webkit-mask-**中所解释的那样，对webkit有部分支持，即前缀属性将起作用，例如{{1}}

css遮罩去除背景颜色

2 个答案: