Question

我想在网页上创建并添加文字水印。它应该在纯JavaScript中创建。

修改

说明：以当前页面为例，我希望能在本页中间显示半透明文本“STACKOVERFLOW”。

Answer 1

使用纯JS创建水印很长，但使用jQuery更容易：

$(document).ready(function(){
  var Html = "<div id='myDiv'>My Watermark</div>";
  $("body").append(Html);

  $("#myDiv").css({
    "color":"#bbb","font-size":"100px",
    "position":"absolute","top":"0px","left":"0px",
    "z-index":"-1","transform":"rotate(45deg)"
  });
});

请参阅此jsfiddle：http://jsfiddle.net/jondinham/agz5tytb/

使用纯JavaScript，它更难，因为＆＃39;转换＆＃39; css不是旧浏览器的标准。无论如何，它可以这样做：

var div = document.createElement("div");
document.getElementsByTagName("body")[0].appendChild(div);

div.innerHTML = "My Watermark";
div.style.color = "#bbb";
div.style.fontSize = "100px";
div.style.position = "absolute";
div.style.top = "0px";
div.style.left = "0px";
div.style.zIndex = "-1";

div.style.transform = "rotate(45deg)"; //standard
div.style.msTransform = "rotate(45deg)"; //IE
div.style.mozTransform = "rotate(45deg)"; //Firefox
div.style.webkitTransform = "rotate(45deg)"; //Chrome
div.style.oTransform = "rotate(45deg)"; //Opera

参见jsfiddle：http://jsfiddle.net/jondinham/7fqg9n6w/

有没有办法在纯JavaScript中创建TEXT水印？

1 个答案: