使用barryvdh/laravel-dompdf生成Laravel PDF时如何为不同页面设置不同背景图

你之前的写法默认将背景元素设为了全局固定定位，dompdf的渲染规则里全局固定定位的元素会在所有页面重复显示，修改可以用以下两种可行方案：

方案1：手动控制分页+每页独立容器 #

适合分页位置可控、每页需要完全自定义不同背景的场景

样式代码 #

<style>
    @page {
        margin: 0; /* 清除默认边距避免背景出现白边 */
    }
    .pdf-page {
        position: relative;
        page-break-after: always; /* 每页结束后强制分页 */
        width: 100%;
        height: 100vh; /* 占满单页高度 */
    }
    .page-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* 背景置于内容下层 */
    }
    .page-content {
        position: relative;
        padding: 30px; /* 按需设置内容边距，避免贴边 */
        z-index: 1;
    }
    /* 最后一页取消强制分页，避免生成多余空白页 */
    .pdf-page:last-child {
        page-break-after: avoid;
    }
</style>

页面结构代码 #

<!-- 第一页 -->
<div class="pdf-page">
    <img class="page-bg" src="{{ public_path('pdf-backgrounds/第一页背景图名.jpg') }}" alt="页面背景">
    <div class="page-content">
        第一页的内容写在此处
    </div>
</div>

<!-- 第二页 -->
<div class="pdf-page">
    <img class="page-bg" src="{{ public_path('pdf-backgrounds/第二页背景图名.jpg') }}" alt="页面背景">
    <div class="page-content">
        第二页的内容写在此处
    </div>
</div>

<!-- 更多页面按相同结构新增即可，每个页面可单独指定不同背景图 -->

方案2：CSS命名页规则 #

适合动态内容无法提前确定分页位置、同类型页面共用同一张背景的场景

样式代码 #

<style>
    @page {
        margin: 0;
    }
    /* 自定义不同类型页面的背景 */
    @page cover {
        background-image: url({{ public_path('pdf-backgrounds/封面背景.jpg') }});
        background-size: 100% 100%;
    }
    @page content {
        background-image: url({{ public_path('pdf-backgrounds/正文背景.jpg') }});
        background-size: 100% 100%;
    }
    @page end {
        background-image: url({{ public_path('pdf-backgrounds/封底背景.jpg') }});
        background-size: 100% 100%;
    }
    .cover-page {
        page: cover;
        page-break-after: always;
    }
    .content-page {
        page: content;
        page-break-after: always;
    }
    .end-page {
        page: end;
    }
</style>

页面结构代码 #

<div class="cover-page">
    封面内容
</div>
<div class="content-page">
    正文内容，就算内容过长自动分页，所有归为content类型的页面都会自动使用正文背景
</div>
<div class="end-page">
    封底内容
</div>

注意事项 #

• 确保图片路径为本地绝对路径，dompdf无法直接读取外链/相对路径的图片，路径解析异常时可将图片转成base64格式嵌入
• 建议使用1.0.0及以上版本的dompdf，对命名页规则的兼容性更好

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