背景图片溢出/图片覆盖组件：圆形中心Logo左侧覆盖边框求助

结合你遇到的问题和提供的代码，试试以下几个针对性方案：

方案1：调整元素层级（z-index） #

如果被覆盖的边框是页面中独立元素，核心原因大概率是Logo的层级高于边框。给边框元素设置更高的z-index（注意元素需设置position: relative/absolute/fixed才能让z-index生效）：

/* 假设边框元素的类名为border-line */
.border-line {
  position: relative;
  z-index: 10;
}

或者直接降低Logo容器的层级：

.centre_logo_container.open,
.centre_logo_container.close {
  position: relative; /* 确保z-index属性生效 */
  z-index: 1;
}

方案2：修正背景图与边框的容器关系 #

如果你的圆形Logo是通过background-image实现的（而非<img>标签），把背景图放在带边框的容器内部，同时给容器加上overflow: hidden：

.centre_logo {
  /* 保留原有尺寸、圆角样式 */
  border: 2px solid #你的边框颜色; /* 如果边框加在Logo容器上 */
  overflow: hidden;
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
}

要是边框属于父容器，就把overflow: hidden加到父容器上，同时给父容器设置圆角：

.centre_logo_container {
  border: 2px solid #你的边框颜色;
  border-radius: 50%;
  overflow: hidden;
}

方案3：微调Logo的定位偏移 #

如果是open状态下的绝对定位导致覆盖，微调left值让Logo避开边框区域：

.centre_logo_container.open {
  left: 53%; /* 比原有52%右移，具体数值根据实际布局调整 */
}

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