css在图片上放另一张图片

CSS是前端开发中必不可少的技术，它可以控制网页的样式和布局。在CSS中，我们可以通过多种方式来处理图片，其中一种方式是将另一张图片放在原有图片上面，形成一种叠加效果。

img{
    position: relative;
}
img::after{
    content: "";
    background-image: url("另一张图片的路径");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    

这段代码中，我们首先将img元素的position设置为relative，让它成为一个相对定位的元素。然后，我们使用伪元素::after来给img元素添加一个装饰层，通过content属性来为伪元素添加一个空内容。接着，我们在伪元素中使用background-image属性来指定另一张图片的路径，并将其position设置为absolute，使其相对于img元素进行定位。最后，我们设置伪元素的宽高为100%，让它和img元素完全重合。

这种技术可以用来实现很多有趣的效果，比如在图标上叠加一个角标、在文本框上添加背景图片等等。如果想要进一步优化效果，可以使用opacity属性来控制叠加层的透明度，或者使用transform属性来对叠加层进行旋转、缩放等变形操作。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！