css在图片上再加图片吗

我们可能经常在网页上看到一些图片，而这些图片上还带有一些小图标或标签，让图片更加丰富和具有表现力。这个魔法就是CSS。

/*在图片上添加小图标*/.image-icon {
    position: relative;
}
.image-icon:before {
    content: url("icon.png");
    position: absolute;
    top: 10px;
    left: 10px;
}

上面这段CSS代码，定义了一个类名为'image-icon'的元素，在其中我们使用了CSS的定位属性，将小图标相对于图像的左上角偏移10像素。需要注意的是，我们使用了"content"属性来将小图标添加到元素中。这样，我们就可以在图片上添加小图标。

不仅可以在图片上添加小图标，我们还可以在图片上添加水印或自定义文本。通过CSS的背景属性可以实现这个功能。

/*在图片上添加水印*/.image-watermark {
    background-image: url("watermark.png");
    background-repeat: no-repeat;
    background-position: center center;
}
    

上面这段CSS代码，定义了一个类名为'image-watermark'的元素，我们通过设置其背景图像为水印图片，并且在背景中将其居中，实现了在图片上添加水印的效果。

通过CSS，在图片上添加小图标或自定义文本，可以使得网页更加生动有趣，增强用户体验。

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