如何模糊背景图片而不模糊页面主体内容？

尝试给背景图片设置模糊效果，但页面所有内容也跟着模糊了。已创建父div放置背景、子div承载内容，参考方法未生效。

问题原因 #

你当前把内容容器.body-content作为.background的子元素，而filter: blur()会作用于元素及其所有子元素，所以内容也被模糊了。正确的做法是将背景层和内容层设置为同级元素，通过定位让背景层在底层，内容层在上方，这样背景的模糊就不会影响内容。

修改后的代码 #

HTML结构调整 #

把.background和.body-content改为同级，都放在main内部：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="header.html">Lake George and Jefferson Project</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="header.html">
            <i class="fas fa-home nav-icon"></i>
            <span class="nav-text">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Analysis.html">
            <i class="fas fa-analytics nav-icon"></i>
            <span class="nav-text">Analysis</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="About.html">
            <i class="fas fa-info-circle nav-icon"></i>
            <span class="nav-text">About Data Set</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<main>
  <!-- 背景层 -->
  <div class="background"></div>
  <!-- 内容层 -->
  <div class="body-content">
    <h2> &emsp; About Lake George</h2>
    <section>
      <img src="3.jpg" alt="Image 1">
      <div class="description">
        <p>Lake George has a surface area of approximately 44 square miles and an average depth of 70 feet, with a maximum depth of 196 feet. The lake is fed by several small streams and drains into the St. Lawrence River via the Richelieu River. The water quality of Lake George is monitored by the Lake George Association and other organizations, and data shows that the lake has generally good water quality, with low levels of nutrients and pollutants. In terms of recreational use, Lake George is a popular destination for boating, fishing, and swimming. The New York State Department of Environmental Conservation (DEC) regularly stocks the lake with a variety of fish species, including lake trout, landlocked salmon, and smallmouth bass. Data on fish populations and catch rates are used to manage the fishery and set regulations on fishing seasons and bag limits. Tourism is a major industry in the Lake George area, and data from the Warren County Tourism Department shows that the lake attracts millions of visitors each year. The tourism industry generates significant revenue for the local economy, supporting businesses such as hotels, restaurants, and outdoor recreation outfitters.</p>
      </div>
    </section>
    <h2> &emsp; About Jefferson Project</h2>
    <section>
      <img src="Jefferson.jpg" alt="Image 2">
      <div class="description">
        <p>Lake George has a surface area of approximately 44 square miles and an average depth of 70 feet, with a maximum depth of 196 feet. The lake is fed by several small streams and drains into the St. Lawrence River via the Richelieu River. The water quality of Lake George is monitored by the Lake George Association and other organizations, and data shows that the lake has generally good water quality, with low levels of nutrients and pollutants. In terms of recreational use, Lake George is a popular destination for boating, fishing, and swimming. The New York State Department of Environmental Conservation (DEC) regularly stocks the lake with a variety of fish species, including lake trout, landlocked salmon, and smallmouth bass. Data on fish populations and catch rates are used to manage the fishery and set regulations on fishing seasons and bag limits. Tourism is a major industry in the Lake George area, and data from the Warren County Tourism Department shows that the lake attracts millions of visitors each year. The tourism industry generates significant revenue for the local economy, supporting businesses such as hotels, restaurants, and outdoor recreation outfitters.</p>
      </div>
    </section>
  </div>
</main>

CSS修改 #

调整.background的定位属性，确保它铺满视口且在内容下方，同时给.body-content设置相对定位，让它在背景上方：

body {
  background-color: #f0f5ff;
  margin: 0;
  padding: 0;
  position: relative;
}

.background {
  background-image: url(background1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(2px);
  /* 定位让背景铺满整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 把背景放在内容下方 */
}

.navbar {
  background-color: #0077be;
  /* 导航栏需要在最上层 */
  position: relative;
  z-index: 10;
}

.navbar-brand {
  color: white;
  font-weight: bold;
}

.navbar-nav .nav-link {
  color: white;
}

.body-content {
  position: relative;
  z-index: 1; /* 确保内容在背景上方 */
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 50px;
}

section img {
  width: 40%;
  height: auto;
  margin-right: 20px;
}

.description {
  flex: 1;
  font-size: 1.2rem;
  color: white;
}

@media screen and (max-width: 768px) {
  section {
    flex-direction: column;
    margin: 20px;
  }
  section img {
    width: 100%;
    margin-bottom: 20px;
  }
  .description {
    margin-bottom: 20px;
  }
}

关键修改点 #

• 将背景层和内容层改为同级，避免子元素继承模糊效果
• 给.background设置position: fixed和z-index: -1，让它铺满视口且在底层
• 给导航栏和内容层设置position: relative和更高的z-index，确保它们显示在背景上方

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