打印平铺在网页上的图像答案

【问题标题】：Print an image tiled on a web page打印平铺在网页上的图像
【发布时间】：2012-10-21 00:27:30
【问题描述】：

我需要能够在一个区域内平铺图像，但也需要打印该图案。

传统上，您使用重复的背景平铺图像，但在大多数浏览器中不会打印背景，除非您明确启用该行为。

请参阅this jsFiddle 了解我需要的示例（除了此示例无法正确打印）。

只要能打印出交叉影线图案，任何肮脏的伎俩都是完全可以接受的。

jsFiddle 的相关部分摘录如下：

<style>
#danger div { background: white; padding:15px; margin:15px;  }
#danger { margin:15px;border: 1px solid black;
    background: url(http://i.stack.imgur.com/pTOTJ.png);
}
</style>
<div id="danger"><div>
    <h3>Danger Will Robinson</h3>
    <p>Don't forget to frob the sporkle.
</div></div>

【问题讨论】：

我不明白。可以举个例子吗？
你有一个例子，就在那里。单击您可以查看的 jsFiddle。但请注意，如果您打印它，则不会打印交叉影线图案。
好的，现在我明白了^^ 我认为没有办法做到这一点，抱歉。您是否考虑过使用打印样式表？
@DavidMorenoGarcía 是的，但是把它放在打印样式表上并不能让它打印出来。
我要做的就是让图像比你需要的大（在photoshop中自己平铺），然后把图像放在html中（而不是背景），放在一个绝对位置的div中，用低 z-index 将其保留在文本后面。诀窍是让 div 尽可能高。

标签： html css browser printing

【解决方案1】：

没有跨浏览器的方法可以做到这一点，最好的选择是制作一个打印样式表（具有不同的样式）或将背景放在 HTML 文件中。如果您想强制 Chrome 和 Safari 打印 css bacgrounds，您可以在要打印的每个元素中使用 -webkit-print-color-adjust: exact;。

试试这个http://jsfiddle.net/xjD3X/1/

【讨论】：

【解决方案2】：

根据我上面的评论，我做了这个：http://jsfiddle.net/xjD3X/2/ 它使用绝对位置将图像放置在您的文本后面，并且由于它在 html 中，它会打印：

#bg {display:block; position:absolute; top:0; left: 0; z-index: 0;}
#danger div { background: white; padding:15px; margin:15px; position:relative; z-index: 100; }

唯一的问题是它不会自己平铺。但是，如果您的图像与您在 Jsfiddle 中使用的图像一样，则较大版本的图像不会太重。

我为图像使用了跨度，但您可以使用 div 或任何其他标记。

【讨论】：