Html 在css中使图像的白色背景透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12662759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make white background of image transparent in css
提问by Nick
I have two images, one of which is a small icon that is superimposed over the first image. My icon has a white background, so when the icon is placed over the other image, we get this effect where a white square appears over the image. Ideally, I do not want to display this white background on top of my other image. Is there is a CSS property I can apply to my icon to make its white background transparent?
我有两张图片，其中一张是叠加在第一张图片上的小图标。我的图标有一个白色背景，所以当图标放在另一个图像上时，我们会得到这样的效果，即图像上出现一个白色方块。理想情况下，我不想在我的其他图像之上显示此白色背景。是否有一个 CSS 属性可以应用于我的图标以使其白色背景透明？
回答by user1822264
Actually there is a way although only currently supported on Chrome, Firefox, and Safari. If the background color is white, you can add the CSS property:
实际上有一种方法，尽管目前仅在 Chrome、Firefox 和 Safari 上受支持。如果背景颜色为白色，则可以添加 CSS 属性：
mix-blend-mode: multiply;
You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
您可以在此处阅读更多相关信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
回答by dovidweisz
Opacitator
遮光剂
mix-blend-modedoes work for some browsers, but we've found that it causes performance issues in chrome, I have no idea why.
mix-blend-mode确实适用于某些浏览器，但我们发现它会导致 chrome 出现性能问题，我不知道为什么.
A designer on my team came up with this genius hack, where you create a layer that is mostly transparent, but when it is laid over a white background, it's color will match the color of the surrounding background.
我团队中的一位设计师想出了这个天才黑客，您可以在其中创建一个大部分透明的图层，但是当它放置在白色背景上时，它的颜色将与周围背景的颜色相匹配。
The way this "magical" color is found; is by calculating how much darker each color axis should be for the amount of opacity removed. The formula for this is
255 - ( 255 - x ) / opacity. The issue is: If the opacity is set too low the formula gives you negative numbers (which can't be used). If the opacity is too high, you'll get some coloring on the non-white portions of your image.
Initially we used a spreadsheet that would do the calculations and through manual trial and error we would find that Goldilox color.
Once we started using sass I realized that this can be accomplished with a binary search. So I created a sass function that does the work for us.
发现这种“神奇”颜色的方式；是通过计算每个颜色轴对于移除的不透明度量应该变暗多少。这个公式是
255 - ( 255 - x ) / opacity。问题是：如果不透明度设置得太低，公式会给你负数（不能使用）。如果不透明度太高，您会在图像的非白色部分出现一些颜色。
最初我们使用一个电子表格来进行计算，通过手动试错，我们会发现 Goldilox 的颜色。
一旦我们开始使用 sass，我意识到这可以通过二进制搜索来完成。所以我创建了一个 sass 函数来为我们工作。
Check out this giston sassmeister. Pass your background color in-to the opacitatorfunction on line 56 of the sass-code. and use the generated rgba color in a div (or a pseudo element) to overlay the image.
在sassmeister上查看这个要点。将您的背景颜色传递给sass 代码第 56 行的函数。并在 div（或伪元素）中使用生成的 rgba 颜色来覆盖图像。opacitator
I also created a working example on codepen.
回答by Anthony M. Powers
No. Not yet...
还没有...
It iss getting very close to possible, though. Check out this article about CSS Filters, an experiemental css feature, that is doing some things client-side that are neat.
不过，这已经非常接近可能了。看看这篇关于 CSS 过滤器的文章，这是一个实验性的 css 特性，它在客户端做一些整洁的事情。
回答by DrawdeX
You can make a container for your image. Then for the css of the container:
您可以为您的图像制作一个容器。然后对于容器的css：
overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;
Hope it helps. :)
希望能帮助到你。:)
