有时为了避免网站信息随意被别人使用,可以在网站整体背景添加水印,当然这主要是针对截图类的信息,如何快速为网站添加水印呢?

首先我们要准备一张图片作为水印背景图watermark.png

要让这样图片完全覆盖视口区域只需要添加如下CSS代码:

body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('./watermark.png');
  opacity: 0.3;
  pointer-events: none;
}

关键点在于pointer-events这个属性。

它的作用指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西

示例截图:

在线示例:

觉得作者写得不错?不妨轻击下方按钮~

赏点银子给楼主凑凑买咖啡喝吧
微信
支付宝
扫码打赏,建议金额1-10元

Copied From 畅言