背景图像颜色不变

Question

我正在尝试更改以下图片的背景颜色以匹配它所在的条形颜色，但它没有做任何事情。

如上所示，球有白色背景，我试图让它成为酒吧所在的颜色。

我尝试了什么 选项1

 #img{
     background: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%) //this is the same color as the tab its on
    }

选项2

#img{
     background-image: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%),url(./images/image.png); 
    }

2选项

#img{
         colour: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%)
        }

html

<li  style="background: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%);box-shadow: inset 0 2px 1px 0 #cfcfcf;"><a href="link ">Ball<img id="img"  src="./images/image.png" /></a></li>

有什么建议吗？

Answer 1

图像元素的背景颜色被图像本身中的白色像素所掩盖。

您应该编辑图像文件，用透明像素替换白色像素。

Answer 2

编辑你的img，使其具有透明背景。

您可以使用 Luna Pic 在线编辑器

Answer 3

  

问题是图像元素的背景颜色是白色   颜色。

在透明背景中转换图像。 使用 GIF，PNG，BMP，TIFF和JPEG 格式进行图像处理。

用于在线图片编辑Luna Pic

您还可以使用Photoshop或支持透明度功能的任何其他编辑器离线编辑图像。

Answer 4

图像的背景颜色显然在图像中固定，如果您无法改变图像，则应更改li背景。您li的背景渐变应为to right，并且已达到第二种颜色（即图像的背景颜色）。 80％如下图所示。

＆＃13;

＆＃13;

li {
  height: 100px;
  background: linear-gradient(to right, #cfcfcf 0, #f7f7f7 80%);
  box-shadow: inset 0 2px 1px 0 #f7f7f7;
}

a {
  float: right;
}

＆＃13;

<li><a href="link ">Ball<img id="img"  src="http://placehold.it/100x100/f7f7f7" /></a></li>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您无法更改.jpg图像的颜色。你可以做的是你可以在photoshop的帮助下拍摄透明背景的.png图像，以匹配你的背景颜色

OR

如果您不熟悉Photoshop

，可以使用font awesome icon