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

Question

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

带有svg背景的按钮：

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

documentation

没有svg背景的按钮：

if((unsigned char)(data.at(0)==0xFF){}

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