1

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

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

有关我需要的示例，请参阅此 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>
4

2 回答 2

1

根据我上面的评论，我做了这个：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 或任何其他标记。

于 2012-10-21T00:57:21.650 回答
1

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

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

于 2012-10-21T00:48:04.650 回答