如何在页面左右两侧的图片上方放置菜单圆形元素

嘿，我来帮你搞定在页面左右两侧图片上方添加圆形菜单的需求！先看看怎么调整你的代码结构和样式：

第一步：调整HTML结构 #

原来的代码是用背景图实现左右图片，咱们把它改成独立的容器，每个容器里放圆形菜单和对应图片（或者保留背景图），这样能更灵活地定位菜单：

<div class="homepage">
  <!-- 左侧图片区域 + 圆形菜单 -->
  <div class="image-wrapper left">
    <div class="circle-menu">左侧菜单</div>
  </div>
  <!-- 右侧图片区域 + 圆形菜单 -->
  <div class="image-wrapper right">
    <div class="circle-menu">右侧菜单</div>
  </div>
  <!-- 原有中间内容 -->
  <h2>你的标题内容</h2>
  <div class="centeredImage">
    <!-- 中间图片或其他内容 -->
  </div>
</div>

第二步：更新CSS样式 #

接下来修改你的CSS，实现圆形菜单的样式和精准定位，同时保留原有图片的展示效果：

@charset "utf-8"; 
body { 
  background-color: #000; 
  font-family:'Baskerville', 'Palatino Linotype', 'Palatino', 'Century Schoolbook L', 'Times New Roman', 'serif' 
} 

.homepage {
  position: relative; /* 让内部绝对定位的元素以它为基准 */
  padding: 250px;
}

/* 图片容器：左右各一个，承载背景图 */
.image-wrapper {
  position: absolute;
  width: 220px;
  height: 220px;
  top: 250px; /* 和.homepage的padding-top保持一致 */
}

.image-wrapper.left {
  left: 250px; /* 和.homepage的padding-left一致 */
  background-image: url(pagepics/big_oscar.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.image-wrapper.right {
  right: 250px; /* 和.homepage的padding-right一致 */
  background-image: url(pagepics/emmy.png);
  background-repeat: no-repeat;
  background-size: cover;
}

/* 圆形菜单核心样式 */
.circle-menu {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* 这行是实现圆形的关键！ */
  background-color: #e74c3c; /* 你可以自定义菜单背景色 */
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -30px; /* 向上偏移圆形高度的一半，刚好贴在图片顶部 */
  left: 50%;
  transform: translateX(-50%); /* 让菜单水平居中在图片上方 */
  cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
}

/* 原有样式保留 */
.centeredImage { 
  padding-left: 750px; 
  margin-top: 20px; 
} 

h2 { 
  font-size: 30px; 
  color: white; 
  text-align: center; 
} 

h3 { 
  /* 你的h3样式继续写在这里就行 */
}

可选方案：不修改HTML结构 #

如果你不想改HTML，也可以用伪元素直接在背景图上方加菜单，不过灵活性会差一点：

/* 给.homepage加两个伪元素当菜单 */
.homepage::before, .homepage::after {
  content: "左侧菜单";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e74c3c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  top: calc(250px - 30px); /* 计算位置：padding-top减去圆形一半高度 */
}

.homepage::before {
  left: calc(250px + 110px - 30px); /* 左侧图片位置：padding-left + 图片一半宽度 - 圆形一半宽度 */
  content: "左侧菜单";
}

.homepage::after {
  right: calc(250px + 110px - 30px); /* 右侧同理 */
  content: "右侧菜单";
}

小提示 #

• 你可以根据需求调整圆形菜单的大小（修改width和height）、颜色、文字样式。
• 如果图片位置有变动，记得同步调整image-wrapper或者伪元素的定位数值哦～

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