给原生html中添加水印遮罩层的实现示例

下面是给原生HTML中添加水印遮罩层的实现示例攻略：

1.实现原理

在HTML页面中添加水印遮罩层，可以使用CSS3中的伪类::before或::after来实现。具体来讲，就是通过在HTML元素中添加一个带有背景水印图片的伪元素，来覆盖原有的内容，从而实现添加水印遮罩层的效果。

2. 实现方法

方法1：使用CSS3的伪类实现水印遮罩层

第一步，先在HTML文件中定义一个需要添加水印遮罩层的元素，如<div id="watermark"></div>。

第二步，为该元素的样式表定义以下属性：

#watermark {
  position: relative;
  z-index: 0;
}

#watermark:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-image: url('watermark.png');
  opacity: 0.5;
}

上述样式表中，通过::before伪类来为指定元素添加水印遮罩层。其中，content: ""定义了一块空内容，用来占据元素原有内容的位置；display: block将伪元素设为块级元素以覆盖整个元素；position: absolute和top,bottom,left,right属性将伪元素定位在父元素`的位置。z-index: -1则将伪元素放置在原有内容下方，background-image则定义背景水印图片的地址。最后，通过opacity`属性将水印图片透明度设置为50%。

方法2：使用jQuery实现水印遮罩层

第一步，引入jQuery库，并在HTML文件中定义一个需要添加水印遮罩层的元素，如<div id="watermark"></div>。

第二步，定义以下JavaScript代码：

$(document).ready(function() {
  var watermark = new Image();
  watermark.src = "watermark.png";
  watermark.onload = function() {
    $("#watermark").css({
      "background-image": "url('" + watermark.src + "')",
      "opacity": 0.5,
      "background-position": "center 0",
      "background-repeat": "repeat",
      "z-index": -1
    });
  }
});

上述代码中，通过new Image()新建一个Image对象，并设置其图片资源为水印图片的地址。随后，通过onload事件，等待水印图片完全加载完成后，为指定元素#watermark添加以下样式属性："background-image": "url('" + watermark.src + "')"，用来设置背景水印图片的地址；"opacity": 0.5 用来设置遮罩层的透明度为50%；"background-position": "center 0"，用来将水印图片居中；"background-repeat": "repeat"将图片平铺到整个元素上，并通过"z-index": -1将水印遮罩层置于原有内容下方。

总结

以上就是给原生HTML中添加水印遮罩层的实现示例，你可以根据自己的需求选择以上两种方法，应用到自己的网站中。