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