Override the watermark on the image: after pseudo-element

The requirement of the project is to add a watermark to the picture. It is obviously easier to use pseudo-elements.

However, it is found that using after and before pseudo-elements for img tags will fail

Reasons for using after and before pseudo-elements for img tags:

 Solution: Add a pseudo-class to the parent tag (the image tag is wrapped with a layer of div)

 /* 图片覆盖水印 */
  .swipe-image::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background: url("../../../../static/images/watermark.png") repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

Effect: