html - 水印 CSS 在打印中不起作用

Question

我有以下 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>

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

Answer 1

尝试对指定的 CSS 使用 media="print" 或仅将此 CSS 写入单独的文件中 media='all'，这样它也会生效到打印模式。还要确保您的浏览器支持 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 文件中。