时间戳

首页 > 解决方案 > HTML/css 在打印时重复背景图像两次

html - HTML/css 在打印时重复背景图像两次

问题描述

我想让背景图像准确重复 2 次，在 chrome 上的打印格式的每一页中重复一次。总是有 2 页，而第二页不会一直向下。我还使用来自 php 的动态数据。我目前正在使用此代码，图像的第二次打印从第一页开始，而不是在第二页中显示：

<style type="text/css" media="print">
    body
    {
        background-image:url(image.png);
        background-repeat:repeat-y;
        background-position: right top;
        width:auto; 
    }
</style>

标签： htmlcss

解决方案

这个问题在 CSS 中没有直接的解决方案。虽然你可以试试这个技巧：

<style type="text/css" media="print">
    body{
        background-image:url('red.png'),url('red.png');
        background-repeat:no-repeat;
        background-position: 0px top, 250px top;
    }
</style>

您需要添加背景与您希望它重复的次数完全相同。您可以相应地更改其位置。

与属性的默认值一样也是width:auto;多余的。autowidth

推荐阅读