如何将图片在环绕圆形内居中 并让圆形作为背景边框位于图片后方

调整方案 #

你现有代码的核心问题是外层容器没有设置定位上下文，导致z-index和对齐逻辑没有生效，按以下步骤修改即可： #

1. 修改HTML结构

给外层容器加个类名方便控制：

<div class="img-wrapper">
    <div class="circle"></div>
    <img src="../../assets/img/img.png" alt="" class="showslide">
</div>

2. 替换CSS代码

/* 外层容器作为定位参照 */
.img-wrapper {
    position: relative;
    width: 100%;
}

.circle {
    position: absolute;
    /* 实现圆形在容器内完全居中 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* 尺寸比图片大5%，刚好露出4px边框，可按需调整 */
    width: 85%;
    height: 85%;
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: -1;
}

.showslide {
    width: 80%;
    display: block;
    margin: 0 auto;
}

实现逻辑 #

• 外层容器设置position: relative后，内部元素的定位和层级规则都会以这个容器为参照，保证圆形和图片的对齐关系不会受其他布局影响
• 圆形通过四个方向定位设为0加margin: auto的规则，不管容器尺寸怎么变都能自动居中
• 圆形宽度设为比图片大5%，刚好可以露出完整的白色边框，要调整边框和图片的间距，直接修改.circle的宽高比例即可
• 圆形z-index设为-1，会自然层级低于图片，不会遮挡图片内容

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