水印CSS无法在Print中使用

时间:2012-12-18 09:39:55

标签: html css

我有以下CSS,

#duplicateCopy {
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    transform:rotate(-20deg);
    color:#CCC;
    font-weight:bold;
    letter-spacing:5px;
    position:absolute; 
    z-index:1000; 
    top:35%;
    left:15%;   
    opacity:0.2; 
    filter:alpha(opacity=50);
}

以及我的html页面中的以下div

<div id="duplicateCopy">
<p style="font-size:70px">Duplicate Copy</p>
</div>

以上用于在html页面中显示水印的css位。水印在浏览器窗口中正常工作。但是在打印时,水印文本是不可见的。如何使水印文本可见以进行打印?

1 个答案:

答案 0 :(得分:3)

尝试将media="print"用于此指定的CSS,或仅使用media='all'将此CSS写入单独的文件,以便它也将对打印模式生效。并确保您的浏览器支持CSS3。例如:

<link rel="stylesheet" type="text/css" media="all" src="css/style.css" />

或者如果您更喜欢单独的打印样式,只需使用:

<link rel="stylesheet" type="text/css" media="print" src="css/print.css" />

并将这些CSS样式写入print.css文件。