如何模糊Bootstrap-vue Jumbotron背景图而不模糊上方文字？

你直接给.jumbotron加filter: blur()会让容器内所有元素（包括文字）都应用模糊效果，要只模糊背景图，得把背景和文字分层处理——用伪元素承载背景并单独加模糊，文字放在上层不受影响。

修改后的CSS代码 #

.jumbotron {
  color: rgb(255, 255, 255);
  padding-top: 200px;
  margin-bottom: 50px;
  height: 500px;
  position: relative; /* 让伪元素基于当前容器定位 */
  overflow: hidden; /* 裁剪模糊后超出容器的背景部分 */
}

/* 用伪元素生成模糊背景层 */
.jumbotron::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/Test2.jpeg");
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中显示 */
  filter: blur(5px);
  z-index: -1; /* 将背景层置于文字下方 */
  transform: scale(1.05); /* 轻微放大背景，避免模糊后边缘出现空白 */
}

HTML代码无需修改 #

保持你原来的结构即可，文字会自动显示在模糊背景的上层，不会被模糊影响。

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