CSS中SVG背景覆盖按钮底色问题的解决方法咨询

这个问题我之前也碰到过——当你直接把SVG设为按钮背景时，如果没给按钮指定基础背景色，SVG就会完全覆盖原本的白色（可能是继承来的或者默认的）。咱们一步步来解决：

问题根源 #

你当前带SVG的按钮代码里，只设置了background: url('simple_rack.svg') no-repeat top left;，这相当于把整个背景层替换成了SVG，原本的白色底色自然就被覆盖了。而无SVG的按钮之所以有白色，要么是继承了父元素的背景色，要么是依赖浏览器默认样式，但这种依赖继承的方式并不稳定。

解决方案：给按钮添加基础背景色 + 复合背景写法 #

最直接的办法是在background属性里同时指定白色底色和SVG背景图，CSS的background复合属性支持同时设置颜色和图片，顺序是「颜色在前，背景图在后」。

修改后的代码如下：

#rack-button {
  position: absolute;
  /* 先设置白色底色，再叠加SVG背景图 */
  background: #fff 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在按钮里居中显示，可以把background-position改成center，也就是：

  background: #fff url('simple_rack.svg') no-repeat center;
  

• 确保你的SVG本身有透明区域（如果SVG是全填充的，那即使加了白色底色也看不到），如果SVG是不透明的，你可能需要修改SVG文件，把不需要的填充改成透明，或者调整background-size让SVG只占按钮的一部分。

这样修改后，按钮的白色底色会作为底层，SVG作为上层背景图显示，就不会出现覆盖的问题啦！

内容的提问来源于stack exchange，提问作者iskandarblue