如何防止网站背景图片溢出？附代码寻求解决方案

问题分析 #

当前背景容器.paper为绝对定位，未限制高度，导致图片堆叠后超出页面内容高度，产生不必要的滚动条；同时body设置了固定最小宽度，引发移动端缩放问题。由于需要使用mix-blend-mode和旋转效果，无法直接将图片设为body背景。

解决方案 #

1. 让背景容器高度匹配页面实际内容高度，避免溢出
2. 移除body的固定最小宽度，适配移动端
3. 控制背景图片的尺寸与排列，确保总高度不超出容器

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
  gap: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #D9D9D9;
  /* 移除固定最小宽度，适配移动端 */
}

.paper {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  top: 0;
  left: 0;
  /* 设置容器尺寸与页面一致 */
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #D9D9D9;
  mix-blend-mode: exclusion;
}

.paper img {
  /* 让图片宽度铺满容器，高度自适应 */
  width: 100%;
  height: auto;
  /* 确保图片超出容器部分被裁剪 */
  object-fit: cover;
  flex-shrink: 0;
}

.paper img:nth-child(2) {
  rotate: 180deg;
  transform: scaleX(-1);
}

.paper img:nth-child(3) {
  margin-top: -40px;
  transform: scaleX(1);
  /* 限制第三张图的高度，避免总高度溢出 */
  max-height: calc(100% - 200px + 40px);
  /* 200px为前两张图的大致高度，可根据实际图片尺寸调整 */
}

#contact {
  display: flex;
  padding: 7.551svh 0rem 12.945svh 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  /* 确保contact区块占满剩余空间，让页面高度正确计算 */
  flex-grow: 1;
}

#contact .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#contact .content h4 {
  position: absolute;
  left: 11.97916svw;
  color: var(--primary-light);
  font-family: var(--title);
  font-size: 5.394svh;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.content .main {
  display: flex;
  padding: 6.688svh 0rem 0rem 1.5625svw;
  flex-direction: column;
  align-items: center;
}

.main a {
  color: var(--primary-light);
  text-decoration: none;
  text-align: center;
  font-family: var(--title);
  font-size: 21.575svh;
  font-style: normal;
  font-weight: 400;
}

.main .bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5.394svh;
  align-self: stretch;
}

.main .bottom .divisor {
  display: flex;
  gap: 4.583svw;
  align-items: center;
  align-self: stretch;
}

.bottom .divisor hr {
  flex: 1 0 0;
  border-radius: 2svh;
  border: 0.129svh solid var(--primary-light);
}

.bottom .divisor h3 {
  color: var(--primary-light);
  font-family: var(--title);
  font-size: 4.315svh;
  font-style: normal;
  font-weight: 400;
}

.main .bottom .contact-socials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.main .bottom .contact-socials a {
  color: var(--primary-light);
  font-family: var(--title);
  font-size: 4.315svh;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
}

修改后的HTML代码（结构无需调整） #

<section class="contact" id="contact">
  <div class="content">
    <h4>Do you have a project in mind?</h4>
    <div class="main">
      <a href="mailto:kianbonci@gmail.com" target="_blank">Let’s Connect</a>
      <div class="bottom">
        <div class="divisor">
          <hr>
          <h3>or</h3>
          <hr>
        </div>
        <div class="contact-socials">
          <a href="https://www.behance.net/kianboncilli" target="_blank">Behance</a>
          <a href="https://www.instagram.com/kian_boncilli/" target="_blank">Instagram</a>
          <a href="" target="_blank">Linkedin</a>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="paper">
  <img src="/assets/imgs/bg/bg.png" alt="bg img">
  <img src="/assets/imgs/bg/bg.png" alt="bg img">
  <img src="/assets/imgs/bg/bg.png" alt="bg img">
</div>

关键修改说明 #

• 给html和body设置height:100%，确保背景容器能获取到页面完整高度
• 给.paper设置width:100%和height:100%，限制背景容器范围与页面一致
• 移除body的min-width:79.5rem，解决移动端过度缩放问题
• 给.paper img设置width:100%和object-fit:cover，确保图片铺满容器且不溢出
• 给#contact添加flex-grow:1，让它占满页面剩余空间，保证页面高度计算正确
• 限制第三张图片的最大高度，避免三张图片堆叠后超出容器高度

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