CSs如何批量添加水印

随着网络高速发展，网络图片被大量应用在各个行业。然而，在互联网上使用图片也带来了一些问题。其中之一就是图片未被授权的情况，未授权使用图片很容易导致版权纠纷。

为了保障自己的版权，我们可以在图片上添加水印。一般来说，手动添加水印一个个图片是不现实的，这时候我们可以使用CSS批量添加水印。

.watermark {
  position: relative;
}

.watermark::after {
  content: "";
  background: url("watermark.png");
  opacity: 0.2;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  pointer-events: none;
}

以上CSS代码中，我们给图片父元素添加了一个相对定位，然后在其after伪元素中添加水印图片，并设置一些属性。通过将该CSS代码应用于所有图片的父元素，我们实现了批量添加水印。

当然，这种方法只是简单的添加水印，如果需要更复杂的效果，我们还需要使用一些JavaScript、Canvas等技术。