如何用CSS为Web应用生成的PDF添加背景图？解决模糊问题

嘿，我来帮你搞定这个背景图模糊的问题～这种情况大多和图片缩放、分辨率适配有关，咱们一步步来排查解决：

可能的原因分析 #

• 虽然你把body的尺寸设成了和图片一致的250×130px，但浏览器或PDF生成工具可能在渲染时悄悄对图片做了自动缩放，导致模糊；
• 现在很多屏幕都是高DPI（比如Retina屏），普通分辨率的图片在这些屏幕上会被放大渲染，自然就变得模糊了。

具体解决方案 #

1. 强制背景图与容器尺寸完全匹配 #

直接给background-size指定精确的像素值，杜绝浏览器自动缩放的可能：

body{
    background-image: url('img/logo.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 130px 250px; /* 明确匹配图片原生尺寸 */
    height: 250px;
    width: 130px;
    padding: 0;
    margin: 0;
}

2. 用高分辨率图片适配高DPI屏幕 #

如果是屏幕分辨率导致的模糊，建议准备2倍甚至3倍分辨率的图片（比如500×260px），再通过background-size缩放到容器大小：

body{
    background-image: url('img/logo@2x.jpg'); /* 高分辨率版本的图片 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 130px 250px; /* 缩放到容器尺寸 */
    height: 250px;
    width: 130px;
    padding: 0;
    margin: 0;
}

这样在高DPI屏幕上，图片会以原生高清分辨率渲染，彻底解决模糊问题。

3. 检查PDF生成工具的渲染设置 #

有些Web转PDF的工具默认会压缩图片或降低渲染分辨率，你可以找找工具的设置选项，开启高分辨率渲染或者关闭图片压缩功能，这也能改善最终PDF里的图片清晰度。

4. 换成SVG格式（如果logo是矢量图） #

如果你的logo是矢量图形，直接换成SVG格式的背景图就一劳永逸了——矢量图可以无限缩放而不失真：

body{
    background-image: url('img/logo.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 130px 250px;
    height: 250px;
    width: 130px;
    padding: 0;
    margin: 0;
}

你可以先试试第一种方案，要是还不行再依次尝试后面的方法，应该能解决模糊问题～

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