JS给网页加文字水印背景

说到给网页加背景，我们首先会想到使用CSS3 background背景属性，通过背景图片来给网页添加背景。其实除了使用背景图做网页背景之外，还可以使用文字给网页添加背景或者水印。如下图：

下面介绍一下我们在学习怎么做网站时，怎么使用JS来实现给网页加文字水印背景。

第一步：我们要创建一个文字背景层，代码如下：

<div id="sy" class="table-sy"></div>

第二步：在网页的最底部加上以下的JS代码，用于生成文字背景水印，并且控制每一个水印的文字内容，尺寸大小等。

<script>

var i = 0;

loadSy();

window.onresize = function(){

loadSy();

}

/**

* 页面添加水印

*/

function loadSy () {

var config = {

tw: 300, //内容高度

th: 150, // 内容宽度

c: 80 // 为了避免页面下方有多余的空白, 少显示一行。所以在计算每个水印高度的时候，需要加个差值，使水印分布的更均匀（一般为内容高度的一半即可）

}

var dom = document.getElementById("sy");

var data = {

name: "市级管理员",

code: "370200",

day: "20211223"

}

var width = document.body.offsetWidth;

dom.style.width = width + "px";

var height = document.body.offsetHeight;

dom.style.height = height + "px";

var wnum = parseInt(width / config.tw) || 1;

var hnum = parseInt(height / config.th) || 1;

var wc = (width - wnum * config.tw) / wnum - 1 || 0;

var hc = (height - hnum * config.th + config.c) / hnum - 1 || 0;

var num = wnum * (hnum - 1);

var html = [];

for (var i = 0; i < num; i++) {

html.push('<div style="width: ' + (config.tw + wc) + 'px;height: ' + (config.th + hc) + 'px">', data.name, '<br/>', data.code, '<br/>', data.day, '</div>');

}

dom.innerHTML = html.join("");

}

</script>

第三步：就是通过CSS样式控制文字水印背景的样式了。将以下的CSS代码加到自己的CSS文件里。

.table-sy {

width: 100%;

height: 100%;

position: absolute;

pointer-events: none; /*主要是这个属性*/

color:#d2d6d9;

z-index: 99999999999;

}

.table-sy > div {

/*width: 300px;*/

/*height: 150px;*/

display: flex;

align-items: center;

justify-content: center;

transform: rotate(-40deg);

float: left;

}

这样就可以将文字组成水印背景添加到网页上了。