css 图片上能插图片吗

CSS是一种用于网页设计的语言，可以用它来定义HTML元素的样式。在网页中，除了文字外，图片也是非常重要的元素。在CSS中，我们当然也可以给图片添加样式，比如修改其大小、位置、边框、阴影等等。但是，有时候我们还需要在图片上插入另一张图片，那么这是否是可以实现的呢？

img {
  position: relative;
}
img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%,-50%);
  background-image: url('另一张图片的地址');
}

答案是肯定的。在CSS中，我们可以使用伪元素来实现在图片上插入另一张图片的效果。具体实现方法如下：

首先，我们需要让原始图片的定位为相对定位，即position: relative; 。这是为了让插入的图片使用绝对定位时，可以相对于原始图片进行定位。

接下来，在原始图片的后面添加一个伪元素img::after，并设置其显示内容为空。然后，将伪元素img::after的定位设置为绝对定位，位置设置为居中，并设置宽度和高度，以及背景图片的地址。至此，我们就成功地实现了在图片上插入另一张图片的效果。

需要注意的是，如果我们希望插入的图片仅仅是用于装饰或者是图标等静态的元素，可以使用伪元素来实现。但如果插入的图片是需要作为交互元素进行操作，或者是需要动态修改的内容，那么最好还是使用JavaScript等其他编程语言来实现。