React中显示透明背景PNG图片及实现灰白方格背景的技术问题咨询

这种灰白方格是展示透明图片时的经典背景样式，完全可以通过纯CSS实现，不需要额外的图片资源。下面给你两种实用方案：

方案一：双重线性渐变实现标准方格效果 #

这种方法和设计工具里的透明背景效果完全一致，通过两层错开的线性渐变组合出规整的方格：

.image-container {
  width: 100%;
  height: 100%;
  /* 叠加PNG图片与方格背景，PNG放在最上层 */
  background-image: 
    url('exampl.com/image.png'),
    repeating-linear-gradient(45deg, #eeeeee 25%, transparent 25%, transparent 75%, #eeeeee 75%, #eeeeee),
    repeating-linear-gradient(45deg, #eeeeee 25%, transparent 25%, transparent 75%, #eeeeee 75%, #eeeeee);
  background-repeat: no-repeat;
  /* 分别定义各背景层的尺寸：PNG覆盖容器，方格为20px大小 */
  background-size: cover, 20px 20px, 20px 20px;
  /* 调整位置：PNG居中，第二层渐变偏移10px形成方格 */
  background-position: center center, 0 0, 10px 10px;
}

原理说明： #

• 两层45度的线性渐变各自生成间隔的灰色条
• 第二层渐变相对于第一层偏移方格尺寸的一半（10px），两者组合后就形成了完整的灰白方格
• PNG图片放在背景层的最前面，确保透明区域能透出下层的方格

方案二：单渐变简化实现 #

如果想要更简洁的代码，也可以用单个重复渐变快速实现：

.image-container {
  width: 100%;
  height: 100%;
  background-image: 
    url('exampl.com/image.png'),
    repeating-linear-gradient(45deg, #eee 0px, #eee 10px, transparent 10px, transparent 20px);
  background-repeat: no-repeat;
  background-size: cover, 20px 20px;
  background-position: center center, 0 0;
}

自定义小贴士： #

• 修改20px可以调整方格大小，数值越小方格越细密
• 把#eee换成其他浅灰色调，能适配不同的设计风格

在React项目中，你可以把这段CSS写在单独的样式文件里，或者用内联样式的方式（注意模板字符串的引号处理）：

<div style={{
  width: '100%',
  height: '100%',
  backgroundImage: `url('exampl.com/image.png'), repeating-linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), repeating-linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee)`,
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover, 20px 20px, 20px 20px',
  backgroundPosition: 'center center, 0 0, 10px 10px'
}}></div>

这样设置后，你的PNG图片透明区域就会显示出灰白方格，而不是默认的白色背景啦！

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