平时我们在网站上或多或少会看见类似这种的背景水印，正好今天也做了一个，在此记录一下。

每次做这种常见的功能时，必不可少的一步就是先在网上搜一下子，看看别人是怎么做的，最好是可以直接复制代码或者有什么小插件什么的，今天也是在网上找了半天，但是感觉功能都不太完整，要么是水印会随着鼠标一起上下滚动，要么就是会将浏览器宽度定死，导致窗口缩小的时候出现横向滚动条或者水印直接消失，本来我们网站就有自己的最小宽度，所以也不行。这种情况我是可以将他们的代码仔细看完，然后自己再优化这些功能的，但我觉得那始终不是自己写的，借鉴下可以，但还是自己写一次更好。

(function(){
    let div = document.createElement('div');
    div.style = `height:100vh;width:100%;position: fixed;top:0;z-index:9999;pointer-events:none;opacity:0.15;`;
    div.style.backgroundImage = `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='160px' viewBox='0 0 200 160'><text x='-60' y='-60' fill='%23000' transform = 'rotate(-35 240 -200)' font-size='20'>蔡海</text></svg> ")`;
    let bo = document.body;
    bo.insertBefore(div, bo.lastChild);
}())

是的，代码已经复制完了，上面说了这么多废话，其实就这点代码，这个立即执行函数还是我后面加的，主要是为了减少全局变量和防止我的的变量名和你的起冲突，毕竟我这变量名这么low。真正起作用的其实就中间那几行，现在我来说一下这几行代码的思路，从最顶上那张又大又宽的图片中来看，我们的背景水印和我们的背景图片很像，其中每个“蔡海”所占的空间就是一张图片所占的空间，而且我们完全不需要考虑每行每列到底需要多少个“蔡海”，css的 background-repeat就能完全搞定，而且也不用担心浏览器窗口变化的问题，实在是一举多得，这才是代码这么少的原因，但是还有最重要的一点，我们的背景图片可以使用SVG，这样就使得我们可以将任何js变量写进去。说到这里，代码就不读了吧，毕竟就那么几行。

最后说一下，复制这段代码，在你的浏览器的任何页面，F12打开控制台,点击Console，将这段代码复制进去，点击回车，感受一下，好吗，乖~