理解CSS滤镜的继承特性
在网页设计中，我们经常会遇到需要对某个区域（父元素）应用视觉效果，例如模糊，但又不希望这些效果影响到其内部内容（子元素）的情况。然而，css的filter属性在应用于父元素时，其效果是会作用于整个父元素及其所有子元素的。这意味着，即使我们尝试在子元素上设置filter: blur(0px)，也无法抵消父元素施加的模糊效果，因为滤镜是作用于整个渲染树的。
例如，以下代码尝试对div应用模糊，但希望p标签不受影响：
text
div{
filter: blur(5px);
}
p{
filter: blur(0px); /* 这并不会阻止p标签被模糊 */
}这种方法无法达到预期效果，因为filter属性在渲染时会统一作用于父元素及其所有后代。为了解决这个问题，我们需要一种机制来将模糊效果与实际内容进行分离。
利用伪元素实现选择性模糊
实现父元素模糊但子元素清晰的关键在于创建一个独立的、可模糊的层，并将其放置在子元素下方。CSS伪元素（如::before或::after）是实现这一目标的理想选择。通过将伪元素作为背景层，并对其应用模糊滤镜，我们可以有效地将模糊效果与前景内容隔离开来。
立即学习“前端免费学习笔记（深入）”；
核心思路：
- 父元素定位： 将父元素设置为相对定位（position: relative;），以便其伪元素可以绝对定位在其内部。
- 创建模糊层： 使用::after伪元素作为模糊层。
- 伪元素定位与尺寸： 将伪元素设置为绝对定位（position: absolute;），并使其覆盖整个父元素区域（width: 100%; height: 100%;）。通常还需要通过top: 0; left: 0;或top: 50%; left: 50%; transform: translate(-50%, -50%);来精确覆盖。
- 应用背景与模糊： 为伪元素设置背景（例如background-image或background-color），然后对其应用filter: blur();。
- 层级管理： 通过z-index属性确保伪元素位于子元素的下方。通常，伪元素的z-index设置为负值（例如-1），而子元素的z-index设置为正值（例如1）或保持默认（默认情况下，后来的元素会覆盖前面的元素，但明确设置z-index更保险）。
示例代码
以下代码演示了如何使用::after伪元素实现父元素背景模糊，而子元素内容保持清晰的效果：
HTML 结构:
这是清晰的文本内容。
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是负值，默认情况下子元素也会在其上方，但明确指定可以提高代码的健壮性和可读性。
注意事项与总结
- 定位上下文： 父元素必须设置为position: relative;、absolute;或fixed;，才能使伪元素的position: absolute;基于父元素进行定位。
- Z-index 管理： 确保伪元素的z-index低于子元素的z-index。通常将伪元素设置为负值z-index，子元素设置为正值或默认值。
- 背景内容： 模糊效果是应用于伪元素的背景（background-image或background-color）。如果父元素本身有背景，而伪元素没有，那么模糊的将是父元素的背景。通常，我们会将要模糊的背景图或背景色设置在伪元素上。
- 性能考虑： filter属性，尤其是blur，是GPU加速的，但在某些情况下（如大量元素或复杂动画），仍可能影响性能。
- 灵活性： 这种伪元素方法不仅适用于模糊效果，还可以用于实现其他背景视觉效果，例如半透明遮罩、颜色叠加等，而不会影响前景内容。
通过上述方法，我们可以优雅地解决CSS中父元素模糊但子元素保持清晰的难题，为网页设计提供了更大的灵活性和更丰富的视觉表现力。
