index.html中的模态框背景模糊效果：HTML5与CSS滤镜结合-html教程-PHP中文网

模态框背景模糊需将backdrop-filter加在.modal-content上并设半透背景（如rgba(255,255,255,0.92)），而非.modal-backdrop；safari须双写-webkit-backdrop-filter且避免transform等触发新层叠上下文的属性。

index.html中的模态框背景模糊效果：html5与css滤镜结合

模态框背景模糊效果在现代浏览器里基本靠 backdrop-filter 实现，不是 HTML5 功能，也不是 filter 能直接搞定的——后者会把模态框自身内容也糊掉。

常见现象：写了样式但背景还是纯白/纯色，没任何模糊。根本原因不是代码写错，而是「背后没东西可糊」或「当前层看不着背景」。

模态框自身背景用了 background: #fff 或 background: white —— 必须改成带透明度的，比如 background: rgba(255, 255, 255, 0.15)
父容器（比如遮罩层 .overlay）设置了 overflow: hidden，它会切断 backdrop 合成链，模糊失效
模态框或其任意祖先元素用了 transform、opacity: 0.99、will-change: transform 等属性，意外创建了 stacking context，导致它“看到”的只是上一层容器的纯色背景，而不是页面主体内容
临时验证法：把模态框样式临时改成 background: transparent; border: 1px solid red;，滚动页面，看红框里是否透出底下文字/图片——不透，说明背景被挡死了

iOS 15.4 之前和部分旧版 Safari 对 backdrop-filter 的合成策略极不稳定，不是兼容性开关问题，是 WebKit 渲染机制限制。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

必须双写：backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);，缺一不可
避免在模糊元素或其父级上使用 transform: translateZ(0) 或 will-change: transform，它们会触发强制合成，反而加剧掉帧
如果滚动中模糊消失，尝试给模态框加 contain: layout paint style;（谨慎使用，某些场景会破坏布局）
降级方案不是 JS 判断，而是 CSS 写两套：@supports not (backdrop-filter: blur(1px)) { .glass-panel { background: rgba(255, 255, 255, 0.8); } }

关键不是“怎么写样式”，而是“谁在哪个层叠上下文里”。模糊生效的前提是：模态框能直接“看见” 或其带背景的内容层。

推荐把模态框直接挂到下（用 JS 动态 append），避开中间多层 DOM 和样式干扰
遮罩层 .overlay 不要设 background，只用 background: rgba(0, 0, 0, 0.5) 提供蒙版，让它保持“透”
模态框本身用 position: fixed，但别同时加 transform —— 如果需要居中，用 top: 50%; left: 50%; transform: translate(-50%, -50%); 是安全的；但 transform: translateZ(0) 这类就危险
模糊值建议控制在 4px～12px 之间；超过 16px 在中低端设备上容易明显掉帧，且文字边缘可能发虚