给image覆盖水印：after伪元素

最新推荐文章于 2025-12-12 06:30:00 发布

原创最新推荐文章于 2025-12-12 06:30:00 发布 · 948 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #css

收录于

本文介绍了一种在图片上添加水印的方法，通过使用CSS伪元素并结合背景图片实现。当直接对img标签使用after和before伪元素不起作用时，可以通过给图片外层的div标签添加伪元素来达到目的。

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

但是发现对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;
  }