Chrome打印预览将repeating-conic-gradient识别为普通conic-gradient的解决办法

方案1：用SVG背景替代CSS渐变 #

Chrome打印引擎对部分CSS重复渐变的渲染支持存在缺陷，改用SVG内嵌背景可绕过该问题：

• 内嵌式SVG实现重复锥形射线效果，可直接写入CSS的background-image中：

.certificate-bg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="conicRay" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M50,0 L50,100" stroke="rgba(0,203,254,1)" stroke-width="1" /></pattern></defs><g><rect width="100%" height="100%" fill="url(%23conicRay)" /><rect width="100%" height="100%" fill="url(%23conicRay)" transform="rotate(2)" /><rect width="100%" height="100%" fill="url(%23conicRay)" transform="rotate(4)" /><rect width="100%" height="100%" fill="url(%23conicRay)" transform="rotate(6)" /><rect width="100%" height="100%" fill="url(%23conicRay)" transform="rotate(8)" /></g></svg>');
  background-size: cover;
}

SVG在打印引擎中的渲染逻辑更稳定，不会出现渐变解析错误。

方案2：生成PNG背景图作为降级方案 #

用设计工具（如Figma、Photoshop）生成与目标渐变效果一致的高分辨率PNG，在打印媒体规则中替换背景：

@media print {
  .certificate-bg {
    background-image: url('path/to/conic-ray-pattern.png') !important;
    background-repeat: repeat !important;
    background-size: 200px 200px; /* 根据证书尺寸调整 */
  }
}

需确保PNG分辨率足够，避免打印时模糊。

方案3：调整渐变语法为角度值 #

Chrome打印引擎对百分比间隔的重复渐变解析可能存在问题，尝试用角度值替代百分比：

.certificate-bg {
  background-image: repeating-conic-gradient(from 0deg at center, rgba(0,203,254,1) 0deg 2deg, transparent 2deg 4deg);
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .certificate-bg {
    background-image: repeating-conic-gradient(from 0deg at center, rgba(0,203,254,1) 0deg 2deg, transparent 2deg 4deg) !important;
  }
}

角度值的渐变规则在打印引擎中可能更易被正确识别。

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