如何在CSS中使含图片的UI元素与视口成比例显示？

我来帮你把四个UI元素（E1-E4）的悬停效果实现出来，基于你已有的代码结构，我会补充完整的HTML和CSS代码：

第一步：完善HTML结构 #

先把四个UI元素都添加到.ui容器中，给每个元素设置唯一ID方便定位和添加样式：

<div class="bg">
  <img src="bg.jpg" id="bg_id">
  <div class="ui">
    <img id="ui-elem1" src="ui-elem1.png" alt="E1">
    <img id="ui-elem2" src="ui-elem2.png" alt="E2">
    <img id="ui-elem3" src="ui-elem3.png" alt="E3">
    <img id="ui-elem4" src="ui-elem4.png" alt="E4">
  </div>
</div>

第二步：完整CSS代码（含悬停效果） #

我补全了背景图的样式，同时给每个UI元素设置定位和悬停动画，你可以根据实际布局调整top/left的值，悬停效果也能自定义：

body {
  overflow: hidden;
  margin: 0;
}

.bg {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#bg_id {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证背景图铺满容器且不变形 */
}

.ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 避免遮挡背景图的交互（不需要可删除） */
}

.ui img {
  position: absolute;
  pointer-events: auto; /* 让UI元素能接收鼠标悬停事件 */
  transition: all 0.3s ease; /* 让悬停效果平滑过渡 */
}

/* 定位每个UI元素到对应位置，请根据实际布局调整数值 */
#ui-elem1 {
  top: 20%;
  left: 15%;
  width: 80px;
}

#ui-elem2 {
  top: 35%;
  left: 70%;
  width: 80px;
}

#ui-elem3 {
  top: 60%;
  left: 25%;
  width: 80px;
}

#ui-elem4 {
  top: 75%;
  left: 65%;
  width: 80px;
}

/* 悬停效果：这里用了缩放+轻微透明度变化，你可以改成其他效果 */
.ui img:hover {
  transform: scale(1.1);
  opacity: 0.9;
  cursor: pointer; /* 鼠标变成手型，提示元素可交互 */
}

关键细节说明 #

• object-fit: cover：解决背景图拉伸或留白的问题，让图完美适配视口
• pointer-events：分层控制鼠标事件，保证背景和UI元素的交互互不干扰
• transition：给悬停效果加上过渡动画，避免生硬的状态切换
• 你可以自由修改悬停逻辑，比如改成颜色滤镜、旋转效果，或者调整缩放比例

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