css print水印 |js控制其他元素css

@media print {
body::before {
content: "Confidential";
position: fixed;
font-size: 5em;
opacity: 0.3;
transform: rotate(-45deg);
z-index: -1;
left: 7%;
top: -10%;
}
}

上述代码中，大家使用了CSS伪元素`::before`来创建了一个容器，在这个容器内添加了水印文本”Confidential”。接下来大家对这个容器进行了样式设置，将其放置在打印页的左上角，并将其旋转45度。大家还通过`opacity`属性来将水印的不透明度降低到0.3，让其更加隐蔽，防止影响文档内容的阅读。最后，大家使用`z-index`属性将其层级设置为-1，让其隐藏在文档之下，不影响其他元素的布局。

除了文字水印之外，大家还可以使用图片来创建更加独特的水印，方法也非常简单。只需要在`::before`容器中添加一个`background-image`属性，就可以将图片作为水印添加到打印页上了。下面是一个具体的例子：

@media print {
body::before {
content: "";
position: fixed;
opacity: 0.1;
transform: rotate(-45deg);
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: 30%;
background-repeat: repeat;
background-image: url("https://example.com/images/watermark.png");
}
}

上述代码中，大家将容器的尺寸设置为占据整个打印页，利用`background-size`属性将其尺寸缩小为原来的30%，并使用`background-repeat`属性将其复制多次，填满整个页面。最后，大家使用`background-image`属性来指定水印的图片链接，添加了一个名为`watermark.png`的水印图片。同样，大家可以根据需要修改`opacity`属性和`transform`属性，调整水印的显示效果。

总之，使用CSS添加打印水印可以很方便地保护大家的文档不被无限制地复制和传播。无论是文字水印还是图像水印，都可以用CSS轻松实现。替代手动添加水印来保护内容更为方便，同时也更加美观。