如何为图片设置透明背景，消除按钮内显示的方格？

解决方案 #

你遇到的方格底纹是PNG透明通道的默认占位标识，正常渲染不会显示，可按以下场景排查修复：

• 图片以<img>标签形式嵌入按钮
  检查对应<img>标签和按钮的CSS规则，移除额外的background/background-color属性，同时给按钮添加background: transparent; border: none; 清除按钮自带的默认背景和边框。
• 图片以background-image形式设置为按钮背景
  给按钮补充以下CSS配置即可：

  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  

• 图片本身导出格式问题
  不要使用PNG-8格式导出透明图，该格式对透明通道支持不完善，容易出现杂色底纹，用设计工具重新导出为PNG-24/PNG-32格式即可。
• 浏览器兼容性问题
  部分老版本webkit内核浏览器会出现透明通道渲染异常，给对应元素添加以下CSS属性即可修复：

  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  

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