项目上的需求是需要给图片上也加上水印 明显 使用伪元素是比较简便的方法
但是发现对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;
}
效果: