html5不提供滤镜布局，filter是css属性；需作用于块级容器并配合定位与堆叠上下文，避免性能问题及层级冲突。
HTML5 本身不提供“滤镜布局”这种概念——filter 是 CSS 属性，不是 HTML 布局机制。想用滤镜做出视觉分层或响应式效果，关键在如何把 filter 和 HTML 结构、CSS 定位/堆叠上下文配合好。
滤镜必须作用在块级容器上才能生效
很多人把 filter 直接加在 <img alt="html5如何布局滤镜_html5滤镜效果布局技巧" > 或内联元素上，结果没反应。这是因为部分滤镜（如 blur()、drop-shadow()）在某些浏览器中对替换元素（如图片）支持不稳定，且无法影响其父容器外的内容。
- 确保目标元素是
display: block或display: inline-block - 避免直接对
<svg></svg>内嵌元素或<canvas></canvas>设置filter，应包裹一层<div> <li>若需对整个区域（含子元素）加模糊，给父容器设 <code>filter: blur(4px)，而不是只作用在背景图上 - 检查是否意外触发了新 stacking context：除了
filter，opacity 、<code>transform、will-change都有同样效果 - 若需弹层浮在滤镜容器之上，把弹层移出该容器 DOM，用
position: fixed或 Portal 方式挂载到 - 不要依赖
z-index跨 stacking context 排序，层级关系已由创建顺序决定 - 避免对
position: sticky或overflow: scroll容器设filter - 用
will-change: filter前先实测——它可能让 GPU 内存暴涨，反而更卡 - 替代方案：用 SVG 滤镜预渲染静态效果；或用两个图层（原图 + 模糊图）叠加，通过
opacity切换，比实时计算快得多
滤镜与 z-index / stacking context 的冲突
加了 filter 的元素会强制创建新的堆叠上下文（stacking context），这会让它内部的 z-index 只在本层生效，容易导致遮挡错乱——比如你给卡片加 filter: drop-shadow(...) 后，卡片里的弹出菜单被截断或压在下面。
性能敏感：filter 不要滥用在滚动区域
filter 特别是 blur() 和 contrast() 在滚动时会频繁重绘，iOS Safari 和旧版 Chrome 上极易掉帧。
立即学习“前端免费学习笔记（深入）”；
<div class="card">
<div class="card__bg"></div>
<div class="card__content">内容</div>
</div>
<style>
.card {
position: relative;
}
.card__bg {
position: absolute;
inset: 0;
background: url(bg.jpg);
filter: blur(6px) brightness(0.7);
z-index: 1;
}
.card__content {
position: relative;
z-index: 2;
}
</style>
真正难的不是写对那行 filter，而是判断它该加在哪一层、会不会吃掉子元素的定位自由度、以及用户滑动时敢不敢让它动。
