Question

我正在尝试添加一个简单的文字水印，我想在每个页面上显示这些水印，它会打印出来并在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;
    }
}

非常感谢任何帮助！

编辑：这不仅仅是为水印图像，否则建议我应该使用图像编辑器。这用于为文档内容的页面添加水印（各种大小的文本部分）。

Answer 1

真正的问题是，每个打印页面底部需要.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英寸的记事卡上打印你的网页，它将与标准尺寸的纸张完全不同。但是，这仍然是朝着正确方向迈出的一步。

Answer 2

你不能在css中这样做，只是因为它不起作用。

想一想，用户只需删除你的css，获取你的图片网址并复制图片，而不会留下水印。右键点击“保存图片网址”也会绕过css。

有两种方法可以添加故障安全的水印。

编辑实际图片

如果您可以控制图像，例如构建摄影作品集，只需在图像编辑器中对其进行批处理，然后在将水印上传到网络之前添加水印。

这是一个好主意，因为无论您在哪里使用它们，您的图像都已准备好水印，因此它们是社交媒体/促销包准备等。

根据要求执行

设置.htaccess规则，拦截任何图像请求，并通过一些服务器端代码重定向它们，这些代码使用图像处理库添加水印并返回二进制图像数据。您可以使用哈希码缓存带水印的图像，并检查先存在的水印版本，以便绕过处理。

这意味着任何图像请求，无论是来自css，HTML还是直接URL，都会提供水印图像。使用一些逻辑来跳过用于装饰您网站的任何图像，否则您将在意想不到的地方加水印！

这里的优点是原始图像不受影响，如果您更新水印，也许作为品牌重塑的一部分，您将无需更新所有图像。

此方法的另一个优点是，您可以将其应用于任何图像，即使您不创建它们 - 例如，如果您有用户将图像上传到您的网站。但应注意这一点，在水印之前，请确保您有权为图像添加水印。

Answer 3

问题原因。打印不支持背景图像。

这是我的解决方案。 1.主要元素的已解决位置（需要打印div）。 2.add元素

<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
    opacity: .8;
}
</style>
<script>
var addWatermark = function () {
        var bodHeight = document.body.scrollHeight;
        //imge size is 1000*400px
        var imgNum = Math.floor(bodHeight/400) ;
        var template = '<img src="../img/icon/watermark.png" class="watermark">';
        var innerHTML;
        //create image number
        for(var i = 0;i < imgNum;i++){
            innerHTML +=template;
        }
        // innerHTML.appendTo("#reportContent);
        $("#reportContent").append(innerHTML);

    }
window.onload = addWatermark;
</script>
<div id="reportContent">
    <div class="mainContend" id="mainContend">
      content reportContentreportContentreportContent
    </div>
</div>

使用适用于所有主流浏览器的css在打印模式下添加文本水印？

3 个答案: