如何解决背景图片超出白色边框的问题？

问题根源在于白色容器未设置溢出裁剪，且overlay的尺寸与变换参数导致其超出容器范围，按以下方式修改代码即可解决：

• 给.whitebox添加overflow: hidden，让容器自动裁剪所有超出边框的内容
• 调整.overlay的宽高和transform参数，确保旋转后元素不会超出白色边框

修改后的完整CSS代码：

body {
  margin: 0px;
}

div.container {
  height: 100vh;
  background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.whitebox {
  position: relative;
  left: -5%;
  width: 75%;
  height: 75%;
  background-color: white;
  border-radius: 3%;
  overflow: hidden; /* 新增：裁剪超出边框的内容 */
}

div.titleclass {
  position: relative;
  height: 30vh;
  overflow: hidden;
}

div.overlay {
  position: absolute;
  background-color: #bdb76b6b;
  background-image: url("https://i.imgur.com/vah2G4d.jpeg");
  background-blend-mode: screen;
  background-size: cover;
  opacity: 0.9;
  transform: rotate(7deg) translate(-1%, -15%); /* 调整位移参数 */
  height: 40vh; /* 缩小高度避免超出 */
  width: 100%; /* 改为容器宽度，避免横向超出 */
}

div.title {
  font-family: "Rockwell";
  font-size: 3.5vw;
  text-align: left;
  color: #006400;
  font-weight: 400;
  font-style: normal;
  position: relative;
  top: 25px;
  left: 20px;
}

关键修改说明： #

1. whitebox的overflow: hidden是核心修复项，它会强制容器内所有超出边框的元素被裁剪，确保视觉上所有内容都在白色边框内部。
2. 调整overlay的宽高和位移参数，是为了在保留旋转效果的同时，让元素边缘不会触碰到白色边框的边界。你可以根据实际视觉需求，微调transform的数值和宽高，达到最理想的显示效果。

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