javascript - 打印出的 html 页面上有水印

Question

https://jsfiddle.net/dhaileytaha/g92gr1sy/3/

上面的 fiddle 有一个打印输出页面。我需要在打印输出页上添加水印。我不知道我们该怎么做。 js、jquery、css 或以上都不是请帮忙

 document.getElementById("btnPrint").onclick = function() {
 var password;

 var pass1 = "cool";

 password = prompt('Please enter your password to view this page!', ' ');

 if (password == pass1) {
   printElement(document.getElementById("example"));
   //console.log(elem);
  }
 }
   //console.log(elem);
   function printElement(elem) {
     var domClone = elem.cloneNode(true);
     console.log(elem);
     var $printSection = document.getElementById("printSection");

   if (!$printSection) {
     $printSection = document.createElement("div");
     $printSection.id = "printSection";
     document.body.appendChild($printSection);
   }

    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
   }

Answer 1

我相信“媒体查询:打印”可能会对您有所帮助。它与所有其他媒体查询基本相同(例如“屏幕”和“投影”等)

您可以构建一个元素(水印)并仅在打印模式下显示它:

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

您可以引用this detailed explanation