[分享]css中怎么在图片中添加图片

CSS如何在图片中添加图片 在CSS中，我们可以通过backgroundimage属性将一张背景图片添加到元素上。但是，如果想要在图片内部再添加一张小图片怎么办呢？本文将为大家详解CSS如何在图片中添...

CSS如何在图片中添加图片

在CSS中，我们可以通过background-image属性将一张背景图片添加到元素上。但是，如果想要在图片内部再添加一张小图片怎么办呢？本文将为大家详解CSS如何在图片中添加图片。

首先，我们需要将包含图片的元素设置为相对定位，这样才能将内部添加的图片定位在图片上。代码如下： 
  .container {
        position: relative;
    } 
接着，在HTML中添加图片后，我们需要通过伪元素:before或:after来添加内部的小图片。代码如下： 
  .container:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background-image: url("小图片的路径");
        background-repeat: no-repeat;
        background-size: cover;
    } 
代码解析：

1. 通过content: ""来创建伪元素。

2. 通过position: absolute和top、left属性将伪元素置于父元素内部，实现定位。

3. 通过transform属性居中伪元素。

4. 设置伪元素的宽高，保证内部小图片能够显示出来。

5. 通过background-image来设置内部小图片的路径，background-repeat: no-repeat防止重复，background-size: cover保证内部小图填充整个伪元素。

至此，我们就成功在图片中添加了内部小图片。完整代码如下： 
  .container {
        position: relative;
        background-image: url("图片的路径");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background-image: url("小图片的路径");
        background-repeat: no-repeat;
        background-size: cover;
    } 
关于在图片中添加内部小图片的CSS知识点就讲解到这里了，希望对大家有所帮助。