SVG背景覆盖CSS中的按钮颜色

Question

我有一个svg图像，我想将其包含在白色按钮内，但是，将其插入CSS的背景中会完全覆盖按钮的白色。 如何在CSS中避免这种情况？

带有svg背景的按钮：

#rack-button {
    position: absolute;
    background: url('simple_rack.svg') no-repeat top left;
    background-size: contain;
    display: inline-block;
    width:  35px;
    height: 35px;
    left: 10%;
    border-radius: 5px;
    color:#fff;
}

没有svg背景的按钮：

#rack-button {
    position: absolute;
    width:  35px;
    height: 35px;
    left: 10%;
    border-radius: 5px;
    color:#fff;
}

Answer 1

您的初始按钮CSS没有说明background-color因此必须在CSS的其他地方说明。

#rack-button {
  position: absolute;
  width:  35px;
  height: 35px;
  left: 10%;
  border-radius: 5px;
  color:#fff;
}

添加图像背景时，您会覆盖原始背景色并替换为透明图像，因此body背景会通过

#rack-button {
  position: absolute;
   background: url('simple_rack.svg') no-repeat top left;
   background-size: contain;
   display: inline-block;
  width:  35px;
  height: 35px;
  left: 10%;
  border-radius: 5px;
  color:#fff;
}

您只需要添加背景色

#rack-button {
   background: white url('simple_rack.svg') no-repeat top left;
}

要么

#rack-button {
   background: url('simple_rack.svg') no-repeat top left;
   background-color:white;
}