在图像中的透明背景颜色

时间:2011-06-09 07:42:40

标签: html css

如何在图片或背景图像中删除或透明特定背景颜色? 例如,我有一个图像,我想删除其中的所有白色像素,以显示页面上“背后”的内容。

<div style="
    background-color: #F4F4F7;
    background-image: url('wa.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 200px 280px;"
align="left">

哪些功能或属性可以实现此目的?

6 个答案:

答案 0 :(得分:8)

我相信没有javascript或HTML的CSS属性,属性或功能可以做你想要的。

您需要在图像编辑器中删除背景,并将图像保存为.gif或png,并保持透明背景。

我习惯用Paint.Net来做,但你可以用你拥有的任何图像编辑器来做。

答案 1 :(得分:5)

在CSS中设置background属性时,您可以为div添加透明背景,图像如下:

#myDiv {
 background:transparent url(myImage);
 }

答案 2 :(得分:5)

在css中添加以下行

mix-blend-mode: multiply;

您可以看到背景颜色和白色像素将消失

答案 3 :(得分:3)

您只能通过PNG格式查看透明图像。在您的示例中,您使用的JPG格式无论您做什么都无法透明(除非您要在css中使用opacity属性)。保存图像时可以使用.gif或.png来获得所需的结果。

答案 4 :(得分:1)

我使用的解决方案是在使用图像之前从图像中删除背景。您可以通过 remove.bg 运行图像来实现。

答案 5 :(得分:0)

这是实现这一目标的一种方法。

  1. 在画布上绘制图像。

  2. 删除所有白色(或首选颜色)像素。