Question

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

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

请参阅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>

Answer 1

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

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

Answer 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或任何其他标记。

打印平铺在网页上的图像

2 个答案: