给image覆盖水印:after伪元素

项目上的需求是需要给图片上也加上水印 明显 使用伪元素是比较简便的方法

但是发现对img标签使用after和before伪元素会失效

对img标签使用after和before伪元素失效的原因:

 解决:给父标签添加伪类(image标签外包裹一层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;
  }

效果:

猜你喜欢

转载自blog.csdn.net/weixin_50114203/article/details/127316688