打印网页时显示背景色和背景图片解决方案

最近在做一项目时,遇到一个问题,内容增加多时换行没有下划线了(书信效果)。
所以想到最好的方式是做一张有划线的书信纸背景图当背景。
发现在打印预览的时,背景图不显示。
后来通过百度和google找到几种方式,可供大家参考。

1、在IE的工具里,Internet选项–>高级–>打印(打印背景颜色和图像)选中
2、在打印预览里,点设置里(打印背景颜色和图像)也选中
3、做一个样式文件,在打印网页中加载并设定为 media=”print”
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
如果用media=”print”打印预览可以正常显示,但网页上的背景就显示不出来。
最好的解决利用在样式中直接定义:
@media print{
printbg {
background-images: url(background.jpg);
height:100px;
}
}
@media screen{
background-images: url(background.jpg);
height:100px;
}
}
4、可以使用img,加 z-index来做背景图(未测试)

5、此方法也尝试了一下,没有效果,可能方法不对。
.background {
display: list-item;
list-style-image: url(yourbackgroundimage.gif);
list-style-position: inside;
letter-spacing: -1000em;
}

如果有更好的解决方法,也可以留言告诉我并互相交流!

此条目发表在CSS Hack, 开发分类目录,贴了, , 标签。将固定链接加入收藏夹。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注