使图像的白色背景在css中透明

我有两个图像，其中一个是叠加在第一个图像上的小图标。我的图标有白色背景，所以当图标放在其他图像上时，我们会得到这种效果，图像上出现白色方块。理想情况下，我不想在我的其他图像上显示这个白色背景。是否有一个CSS属性可以应用于我的图标以使其白色背景透明？使图像的白色背景在css中透明

来源

2012-09-30 Nick

您可以使用Photoshop等工具使图标的背景透明。 – Kedume

正如前面的评论者所说，你不能用CSS来做你想做的事，你必须使用图像编辑工具。 – depa

-6

最好的方法是使用像Photoshop或Paint.Net这样的软件。

我推荐Paint.Net。您应该删除Paint.Net中的白色背景并将img保存为.png。

来源

2012-09-30 16:23:37 Devaffair

OP要求用CSS来做。如果答案不可能，答案是“否” – Paolo

同意@Paolo在这里，你没有回答这个问题。 –

像这样的答案真的让我烦恼，因为他们完全回避了问题，并回答了完全不同的问题。比如说，你在链接一个来自外部资源的股价图。您无法每分钟都将文件完全复制到paint.net并进行修改，对吗？ –

号尚未...

它ISS已经非常接近可能的，虽然。看看这篇关于CSS过滤器的文章，这是一个实验性的CSS功能，它可以完成一些客户端的功能。

CSS Filters

来源

2014-11-14 16:23:53

在Firefox中，CSS Filters现在默认为On By Default。 –

居然还有虽然目前仅支持Chrome，Firefox和Safari的方式。如果背景色为白色，您可以添加CSS属性：

mix-blend-mode: multiply;

你可以阅读更多关于它在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

来源

2015-12-15 19:41:28 user1822264

哇，我知道这是甚至可能的，不错！ – dreamweiver

工程就像一个魔术！很好的答案！ –

但是，这种技术并没有为IE浏览器工作！ –

mix-blend-mode不工作的一些浏览器，但我们发现它会导致性能问题在铬，我不知道为什么。

There is这个天才破解你创建的图层大多是透明的，但是当它放置在白色背景上时，它的颜色将与周围背景的颜色相匹配。

我不记得在那里我们找到了破解，如果有人知道它在哪里发表，请让我知道在评论

这种“神奇”色彩被发现的方式;是通过计算去除不透明度的量，每个颜色轴应该有多深。公式为255 - (255 - x)/opacity。问题是：如果不透明度设置得太低，则公式会给出负数（不能使用）。如果不透明度太高，则会在图像的非白色部分出现一些颜色。
最初我们使用了一个电子表格来进行计算，通过手动试错我们会发现Goldilox颜色。
一旦我们开始使用sass，我意识到这可以用二进制搜索来完成。所以我创建了一个为我们完成工作的sass功能。

结账this gist对sassmeister。将您的背景颜色传递给sass代码行56上的opacitator函数。并在div（或伪元素）中使用生成的rgba颜色叠加图像。

来源

2016-09-08 16:38:17 dovidweisz

您可以为图像制作一个容器。然后对容器的CSS：

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;

希望它能帮助。 :)

来源

2017-06-15 02:43:44 DrawdeX

使图像的白色背景在css中透明

回答

相关问题