如何去除BottomNavigationView图标周围的颜色？

一、静态图标文件处理（用图像工具） #

Photoshop操作步骤 #

• 打开图标文件，选「魔棒工具」点击周围的颜色区域，调整容差（20上下）选中所有相似色
• 按Delete删除选区，保存为PNG格式时记得勾选「透明」选项
• 边缘还有残留的话，用柔边橡皮擦轻擦，或者用「选择并遮住」功能优化边缘

GIMP（免费替代工具）操作步骤 #

• 打开图标，用「模糊选择工具」点击背景色，调整阈值选中所有背景区域
• 按Delete删除后，导出PNG时选择「保存透明像素」选项
• 边缘的污渍可以用「修复画笔工具」抹除

二、网页端图标处理（CSS方案） #

如果是网页中使用的图标，分场景处理：

• 字体图标：检查是否设置了text-shadow或box-shadow，将background设为transparent
• PNG图标（img标签）：

  .target-icon {
    background-color: transparent;
    /* 消除半透明边缘阴影 */
    filter: drop-shadow(0 0 0 transparent);
    background-clip: content-box;
  }
  

• SVG图标：直接编辑SVG文件删除多余的背景路径，或者在CSS里设置fill: currentColor;，同时确认viewBox没有多余空白区域

三、避坑提醒 #

• 图标必须是PNG/SVG这类支持透明背景的格式，若为JPG需先转换为PNG再处理
• 导出图标时务必选择「透明背景」选项，避免携带默认底色

内容的提问来源于stack exchange，提问作者Hải Ngọc