CSS中父元素模糊但子元素清晰的实现方法

理解CSS滤镜的继承特性

在网页设计中，我们经常会遇到需要对某个区域（父元素）应用视觉效果，例如模糊，但又不希望这些效果影响到其内部内容（子元素）的情况。然而，css的filter属性在应用于父元素时，其效果是会作用于整个父元素及其所有子元素的。这意味着，即使我们尝试在子元素上设置filter: blur(0px)，也无法抵消父元素施加的模糊效果，因为滤镜是作用于整个渲染树的。

例如，以下代码尝试对div应用模糊，但希望p标签不受影响：

<div>
    <p>text</p>
</div>

div{
    filter: blur(5px);
}
p{
    filter: blur(0px); /* 这并不会阻止p标签被模糊 */
}

这种方法无法达到预期效果，因为filter属性在渲染时会统一作用于父元素及其所有后代。为了解决这个问题，我们需要一种机制来将模糊效果与实际内容进行分离。

利用伪元素实现选择性模糊

实现父元素模糊但子元素清晰的关键在于创建一个独立的、可模糊的层，并将其放置在子元素下方。CSS伪元素（如::before或::after）是实现这一目标的理想选择。通过将伪元素作为背景层，并对其应用模糊滤镜，我们可以有效地将模糊效果与前景内容隔离开来。

核心思路：

立即学习“前端免费学习笔记（深入）”；

1. 父元素定位： 将父元素设置为相对定位（position: relative;），以便其伪元素可以绝对定位在其内部。
2. 创建模糊层： 使用::after伪元素作为模糊层。
3. 伪元素定位与尺寸： 将伪元素设置为绝对定位（position: absolute;），并使其覆盖整个父元素区域（width: 100%; height: 100%;）。通常还需要通过top: 0; left: 0;或top: 50%; left: 50%; transform: translate(-50%, -50%);来精确覆盖。
4. 应用背景与模糊： 为伪元素设置背景（例如background-image或background-color），然后对其应用filter: blur();。
5. 层级管理： 通过z-index属性确保伪元素位于子元素的下方。通常，伪元素的z-index设置为负值（例如-1），而子元素的z-index设置为正值（例如1）或保持默认（默认情况下，后来的元素会覆盖前面的元素，但明确设置z-index更保险）。

示例代码

以下代码演示了如何使用::after伪元素实现父元素背景模糊，而子元素内容保持清晰的效果：

Eva Design System

基于深度学习的色彩生成器

86

查看详情

HTML 结构:

<div class="parent">
  <p class="child">
    这是清晰的文本内容。
  </p>
</div>

CSS 样式:

.parent {
  width: 300px; /* 设置父元素宽度 */
  height: 200px; /* 设置父元素高度 */
  position: relative; /* 关键：为伪元素提供定位上下文 */
  overflow: hidden; /* 防止模糊边缘溢出 */
  background-color: #f0f0f0; /* 可选：作为备用背景或占位 */
  display: flex; /* 示例：使子元素居中 */
  justify-content: center;
  align-items: center;
}

.parent::after {
  content: ''; /* 伪元素必须有 content 属性 */
  width: 100%; /* 覆盖父元素宽度 */
  height: 100%; /* 覆盖父元素高度 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 从父元素顶部开始 */
  left: 0; /* 从父元素左侧开始 */
  /* 或者使用 transform 实现居中覆盖，如果父元素有 padding 或 border 需调整 */
  /* top: 50%; left: 50%; transform: translate(-50%, -50%); */

  display: block; /* 确保伪元素是块级元素 */
  background-image: url('https://cdn.pixabay.com/photo/2022/06/07/15/56/child-7248693_1280.jpg'); /* 模糊的背景图片 */
  background-size: cover; /* 背景图片覆盖整个区域 */
  background-position: center; /* 背景图片居中 */
  filter: blur(8px); /* 对伪元素应用模糊滤镜 */
  z-index: -1; /* 关键：将伪元素放置在子元素下方 */
}

.child {
  z-index: 1; /* 关键：确保子元素在伪元素上方 */
  position: relative; /* 确保 z-index 生效，且能创建新的堆叠上下文 */
  color: white; /* 示例：使文本在模糊背景上更清晰可见 */
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 示例：增强文本可读性 */
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3); /* 示例：为文本提供半透明背景 */
  border-radius: 5px;
}

代码解释：

• .parent：设置了position: relative，使其成为伪元素的定位上下文。overflow: hidden可以裁剪伪元素在模糊时可能产生的边缘溢出。display: flex等用于子元素居中，并非实现模糊的必要条件。
• .parent::after：
  • content: ''：伪元素必须有content属性才能显示。
  • position: absolute; top: 0; left: 0; width: 100%; height: 100%;：使伪元素绝对定位并完全覆盖父元素。
  • background-image：设置了要模糊的背景图片。
  • filter: blur(8px);：将模糊效果应用于此背景图片。
  • z-index: -1;：这是最关键的一步，它将伪元素放置在所有正常流内容（包括.child）的下方。
• .child：
  • position: relative;：虽然不是严格必需的，但明确设置position属性（如relative或absolute）可以确保z-index属性能够生效，并为子元素创建一个新的堆叠上下文，从而保证它位于伪元素之上。
  • z-index: 1;：确保子元素位于伪元素之上。即使不显式设置，由于伪元素的z-index是负值，默认情况下子元素也会在其上方，但明确指定可以提高代码的健壮性和可读性。

注意事项与总结

1. 定位上下文： 父元素必须设置为position: relative;、absolute;或fixed;，才能使伪元素的position: absolute;基于父元素进行定位。
2. Z-index 管理： 确保伪元素的z-index低于子元素的z-index。通常将伪元素设置为负值z-index，子元素设置为正值或默认值。
3. 背景内容： 模糊效果是应用于伪元素的背景（background-image或background-color）。如果父元素本身有背景，而伪元素没有，那么模糊的将是父元素的背景。通常，我们会将要模糊的背景图或背景色设置在伪元素上。
4. 性能考虑： filter属性，尤其是blur，是GPU加速的，但在某些情况下（如大量元素或复杂动画），仍可能影响性能。
5. 灵活性： 这种伪元素方法不仅适用于模糊效果，还可以用于实现其他背景视觉效果，例如半透明遮罩、颜色叠加等，而不会影响前景内容。

通过上述方法，我们可以优雅地解决CSS中父元素模糊但子元素保持清晰的难题，为网页设计提供了更大的灵活性和更丰富的视觉表现力。

以上就是CSS中父元素模糊但子元素清晰的实现方法的详细内容，更多请关注php中文网其它相关文章！