css在图片上再添加图片

CSS是层叠样式表的缩写，是前端开发中不可或缺的一部分。在我们日常的开发中，经常需要在图片上再添加一张小图标，例如“关注”、“下载”等标志性图标，这时候可以运用CSS技术轻松实现。

.img-icon {
    position: relative;
/* 定位父元素 */}
.img-icon:after {
    content: "";
    background-image: url("icon.png");
    background-size: contain;
    /* 自适应宽高 */width: 20px;
    height: 20px;
    position: absolute;
    /* 定位子元素 */top: 0;
    right: 0;
    /* 偏移量 */margin-top: 10px;
    margin-right: 10px;
    /* z-index用来设置层级，让子元素在父元素之上 */z-index: 1;
}
    

在上述代码中，我们先设置了图片的父元素为相对定位，这样在子元素中通过绝对定位可以轻松实现小图标。使用:after伪元素可以在元素后面添加内容，这里的内容就是我们要添加的小图标。然后给伪元素设置背景图片，并通过background-size属性将图片适应元素的大小。子元素的宽高及偏移量可以根据实际情况进行调整。最后将z-index属性设置为1，确保子元素在父元素之上。

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