PNG 透明背景填充
给带透明通道的 PNG 填上纯色、线性渐变、棋盘格或圆点背景，可保留圆角与内边距，实时预览并导出 PNG / JPEG。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
文件不会上传，全部在本地浏览器处理
还没有上传图片
90%
上传带透明通道的 PNG 后，透明区域会被背景填充；导出 JPEG 时无法保留透明通道。
预览
上传图片后自动生成预览
输出信息
原图尺寸: — 输出尺寸: —
这个工具能做什么
- 给抠好的透明 PNG 填上纯色、线性渐变、棋盘格或圆点背景，直接得到能放进 PPT、电商详情页的成品图。
- 透明底图标在深色页面上看不清时，加一层内边距和圆角背景，视觉上立刻变成一张卡片。
- 导出 JPEG 时透明区域会变黑，先用这个工具把背景填实再导出，就不会出现黑块。
- 做设计稿的占位图：棋盘格背景一眼就能看出哪里是透明的，方便对齐和检查。
示例
输入
#3B82F680
输出
rgba(59, 130, 246, 0.502)
八位十六进制颜色拆成 RGB 加 0–255 的 alpha 通道，80 转成 0.502；不透明的颜色会输出 alpha 1。
常见问题
图片会上传到服务器吗？
不会。文件通过浏览器的 File API 读进内存，绘制和导出全在本地 Canvas 完成，页面不发任何请求，断网也能用。
为什么导出 JPEG 之后透明区域变成黑块？
JPEG 格式根本没有 alpha 通道，透明像素会被编码成黑色。先在「背景类型」里选一个纯色或渐变把背景填实，再导出 JPEG 就正常了。
内边距提示太大是什么意思？
内边距是从图片四周向内缩进的距离，左右各减一次，所以它必须小于图片短边的一半。超了会算出宽度或高度不足 1 像素的绘制区域，工具直接报错。
棋盘格和圆点图案能调多细？
格子大小和圆点间距都必须是 2 以上的整数。图案元素总数超过 2 万个会提示太密，这时增大格子或圆点尺寸即可，否则浏览器要绘制的图形太多会卡。
渐变角度是怎么算的？
和 CSS 线性渐变一致：0° 从下往上，90° 从左往右，渐变线长度是画布在渐变方向上的投影，起点和终点落在画布边界上。
关键词：png 背景透明背景png background背景填充棋盘格checkerboard线性渐变jpeg 质量圆角image background