我正在尝试添加一个简单的文本水印，我希望在每个页面上显示该水印，并在 Firefox、IE 和 Chrome 上看起来合理。
我已经浏览了我能找到的所有相关主题并应用了建议的答案，但无济于事。要么它在每个页面上都显示正常，但不会显示在第一页(Firefox)上。或者它只出现在第一页(Chrome)上。或者根本不显示。
我想知道，是否有一种标准的方法来制作适用于我可能以某种方式错过的所有浏览器的 css 水印？
对于那些对我的 html/css 目前是什么样子感到好奇的人:
<div class="watermark">This is a watermark!</div>
@media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
任何帮助深表感谢!
编辑:这不仅仅是用于给图像加水印，否则我应该使用图像编辑器。这是用于为文档内容页面(各种大小的文本部分)添加水印。
最佳答案
真正的问题是每个打印页面的底部都需要一个 .watermark，但是 CSS 没有这些打印页面的概念。
您可能做的最好的事情是使用 page-break-after CSS 属性在某些点强制分页，然后您可以在此之前放置水印。
类似的东西(未经测试):
@media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
@media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
我真的认为这两个类可能只是同一个元素，但这在代码中似乎更容易理解。
当然，这里的缺点是您需要手动指定每个分页符发生的位置，实际上，如果有人在 4"x6"记事卡上打印您的网页，它将与标准尺寸的纸张完全不同。但是，这仍然是朝着正确方向迈出的一步。
关于html - 使用适用于所有主要浏览器的 css 在打印模式下添加文本水印？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31165782/