☰

图像有可能是其背景的补色吗？

tag-icon • tag-icon colors image-editing transparency
图像有可能是其背景的补色吗？

如果我有一张透明图像，它将采用其背景的颜色。但是，有时，我的图像的前景与背景颜色相同。有时我认为与背景颜色相反（互补）会很酷。例如，黑色变成白色，红色变成绿色，蓝色变成橙色等。这可能吗？我该怎么做？

答案1

我猜这与网站设计有关。

虽然单凭一张图片是不可能实现的（图片只有 alpha 通道，没有其他内容），但现代浏览器具有以下 CSS 功能：背景混合模式和混合模式。我认为将 mix-blend-mode 设置为exclusion会给你想要的结果...

（当然，这是特定于浏览器的，尽管现在被广泛支持。对于 IE，你可能会发现类似的过滤器...）

答案2

透明图像 - 根据定义 - 没有背景颜色。事实上，普通图像文件甚至没有“前景”或“背景”的概念。通常，图像仅由一像素层，这些像素的颜色由其红色、绿色和蓝色的数量定义。在透明图像中，这些像素还指定一个确定其不透明度的 alpha 值。

我认为你想要的是一张独立的图像，它可以以某种方式找出它显示在什么背景上。这在技术上是不可能的。例如，无论网站指定其位置是什么，浏览器都会渲染你的透明 PNG 文件，无论背景颜色（或图像）是什么。你必须为不同的背景在图像中生成不同的颜色。

（当然，还有更复杂的图像格式，例如多层 TIFF 甚至 Photoshop 文件，其中可以有多个具有不同叠加效果的图层，但我知道这不是这个问题的背景。）

相关内容