HTML/CSS新手求助：模糊div背景图时如何避免图片缩小？

嘿，我懂你现在的烦恼——想给div加模糊背景，结果图片居然缩成一团，这确实挺让人头疼的。让我帮你捋清楚问题所在，再给你一个能完美解决的方案。

为什么图片会缩小？ #

通常出现这种情况，大概率是因为你没有给背景图设置合适的尺寸规则，或者直接在元素上使用filter: blur()时，元素的尺寸约束导致图片被压缩。另外，如果你的元素有perspective这类3D属性，也可能间接影响背景图的渲染，但核心问题还是背景图的尺寸控制。

靠谱的解决方案：用伪元素承载模糊背景 #

最稳妥的方式是用伪元素来单独处理背景图和模糊效果，这样既能保证背景图不缩放，又不会影响div里的内容。下面是修改后的完整代码：

HTML结构（假设你的结构是这样）

<div class="parallax">
  <div class="title">你的标题内容</div>
</div>

修改后的CSS代码

.parallax {
  height: 100vh;
  font-size: 200%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
  perspective-origin-x: 100%;
  position: relative; /* 关键：让伪元素相对于这个容器定位 */
}

/* 用伪元素创建模糊背景层 */
.parallax::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图地址'); /* 替换成你的图片路径 */
  background-size: cover; /* 核心：让背景图铺满容器，保持比例不拉伸/缩小 */
  background-position: center; /* 让图片居中显示，避免裁剪重要部分 */
  filter: blur(8px); /* 模糊程度，可根据需求调整（比如5px、10px） */
  z-index: -1; /* 把背景层放到内容的下方 */
  transform: scale(1.05); /* 可选：稍微放大图片，避免模糊后边缘出现空白 */
}

.parallax .title {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  color: #424242; /* 修正了你代码里多余的black */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 真正实现水平垂直居中 */
  text-align: center;
  z-index: 1; /* 确保标题在背景层上方 */
}

关键细节说明 #

• position: relative：给.parallax加上这个属性，才能让伪元素以它为基准进行定位；
• background-size: cover：这个属性会让背景图按比例缩放，刚好铺满整个容器，不会出现缩小或拉伸的情况；
• 伪元素的width:100%和height:100%：保证背景层和容器尺寸完全一致；
• transform: scale(1.05)：因为模糊效果会让图片边缘变得透明，稍微放大一点可以避免容器边缘露出空白；
• 标题的居中修正：原来的代码只设置了left:50%和top:50%，这会让标题的左上角居中，加上transform: translate(-50%, -50%)才能让标题本身完全居中。

如果还有其他问题，比如背景图还是不符合预期，可以检查一下图片的原始比例是否和容器比例相差过大，或者调整background-position来优化显示区域。

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