背景图片颜色不变

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); 
    }

选项3

#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

您不能更改 .jpg 图片的颜色。您可以做的是您可以在 photoshop 的帮助下拍摄具有透明背景的 .png 图像以匹配您的背景颜色

或

如果您不习惯使用 Photoshop，您可以使用 font awesome icon

Answer 4

The problem is background color of the image element is in white color.

在透明背景下转换您的图像。使用 GIF、PNG、BMP、TIFF 和 JPEG 图片格式。

在线图片编辑Luna Pic

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

Answer 5

图片的背景颜色明显是固定在图片内部的，如果不能改变图片，就应该换li背景。你的 li 的背景渐变应该是 to right 并且已经达到了 ca. 的第二种颜色（即图像的背景颜色）。 80% 如下图所示。

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

a {
  float: right;
}

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

背景图片颜色不变

Background image colour not changing

html

css

linear-gradients