如何将图片定位在圆形背景图内部后方并居中？

要实现图片居中在圆形背景内部且位于背景后方，可按以下方式修改代码：

修改后的CSS代码 #

div.info_image {
    text-align: center;
    border: none;
    background: url("http://japancrystal.altervista.org/themes/crystal/imgs/colonna_sx/cerchio_descrizioneluogo.png");
    background-repeat: no-repeat;
    background-position: center;
    height: 220px;
    width: 100%;
    position: relative; /* 设置相对定位，作为子元素绝对定位的参考容器 */
}

img.img_place{
    border-radius: 100%;
    width: 155px;
    height: 155px;
    position: absolute; /* 改为绝对定位实现精准居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 通过位移实现完美居中 */
    z-index: -1; /* 将图片层级设为低于背景，让背景显示在上方 */
}

关键调整说明 #

• 给.info_image添加position: relative，确保内部绝对定位的图片能以该容器为基准定位。
• 替换原有的margin定位方式，用绝对定位+transform组合实现图片相对于容器的精准居中，避免因容器尺寸变化导致偏移。
• 通过z-index: -1调整图片层级，让它显示在圆形背景图的后方。

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