求助：如何实现图片嵌入边界图片？CSS配置未达预期

当前实现效果：

我尝试将杰瑞鼠图片嵌入边界图片中，但没能成功实现。

预期效果：

我的实现思路：

• 创建一个父div，内部放置带有边界图片的img标签
• 尝试将米老鼠图片设为该边界图片的背景图

我的代码：

index.html #

<body>
    <div class="parent">
        <img src= "images/circle-2.png" class = "boundary"/>
    </div>
</body>

app.css #

.boundary{
    width : 300px;
    height:  300px;
    width: fit-content;
    background-repeat: no-repeat;
    background-image: url(./images/mickey.jpeg);
    background-position: center;
    background-size: 69%;
    background-clip: content-box;

}

div {
    display: flex;
    justify-content: center;
  }

核心问题是img标签的src图片会直接覆盖自身的背景图，img标签本身不透明，所以背景图无法透过它显示出来。这里提供两种可行的实现方式：

方法一：双层背景图方案（最简洁） #

把原来的img换成div，通过background-image同时设置杰瑞鼠图和边界图，利用背景图的层级关系（后写的背景图在上层）实现效果：

.boundary{
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    /* 顺序：底层是杰瑞鼠图，上层是边界图 */
    background-image: url(./images/mickey.jpeg), url(./images/circle-2.png);
    background-position: center, center;
    /* 分别控制两张图的大小：杰瑞鼠占69%，边界图占100%容器 */
    background-size: 69%, 100%;
}

.parent {
    display: flex;
    justify-content: center;
}

对应的HTML结构：

<body>
    <div class="parent">
        <div class="boundary"></div>
    </div>
</body>

方法二：嵌套元素方案（更灵活） #

用嵌套的div结构，外层容器放边界图，内层放杰瑞鼠图片，通过flex布局实现居中：

.parent {
    display: flex;
    justify-content: center;
}

.boundary{
    width: 300px;
    height: 300px;
    /* 边界图作为容器背景 */
    background: url(./images/circle-2.png) no-repeat center / 100%;
    /* 用flex居中内部图片 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mickey-img{
    width: 69%; /* 匹配你需要的尺寸比例 */
}

对应的HTML结构：

<body>
    <div class="parent">
        <div class="boundary">
            <img src="./images/mickey.jpeg" class="mickey-img"/>
        </div>
    </div>
</body>

两种方法都能达到你想要的预期效果，根据实际需求选择即可。

内容的提问来源于stack exchange，提问作者Aashutosh Mishra