前端文档教程【免费下载链接】You-need-to-know-cssCSS tricks for web developers~项目地址https://gitcode.com/gh_mirrors/yo/You-need-to-know-css点击查看免费下载当dialog弹窗弹出时如何让背后的页面内容退居二线本文以 You-need-to-know-css 仓库中的「通过模糊弱化背景」一节为骨架完整拆解一条组合方案用 CSSfilter: blur()把弹窗背后的内容整体模糊再配合box-shadow的 50vmax 扩展半径铺出全屏暗幕让弹窗获得清晰的视觉层级。读完本文你将掌握 blur box-shadow dialog的搭配套路、可直接复制运行的交互演示代码以及该方案在主流浏览器中的兼容边界与工程化注意点。为什么需要弱化背景弹窗Dialog / Modal的本质是抢占用户注意力。如果弹窗背后的页面依然清晰可读、色彩丰富用户的目光就会在前后两层内容之间反复游走产生认知负担。业界常见做法有两类压暗Dim在弹窗背后盖一层半透明黑色遮罩靠亮度对比突出弹窗模糊Blur将背景内容模糊化使其失去细节与可读性靠焦点感突出弹窗。「通过模糊弱化背景」文档采用的正是模糊 压暗双管齐下filter: blur(5px)让背景文字失去可读性box-shadow的50vmax扩展阴影再为整个视口盖上一层半透明暗幕。前者解决内容抢眼后者解决亮度对比二者叠加后弹窗的层级感非常明显——正如文档结尾所强调的创造良好的用户体验应当养成一种习惯。方案总览三个技术点一次打通整条方案由三个互相独立的技术点组合而成缺一不可技术点作用关键代码filter: blur(5px)模糊背景内容降低可读性article.de-emphasized { filter: blur(5px); }box-shadow50vmax 扩展半径铺满整个视口的半透明暗幕box-shadow: 0 0 0 50vmax rgba(0,0,0,.3);HTMLdialog元素承载弹窗内容与显隐状态dialog.show()/dialog.close()其中模糊的施加对象是弹窗之外的文章内容article而暗幕挂在弹窗自身的 box-shadow 上因此弹窗本体始终保持清晰、高对比视觉上浮在模糊的背景之上。完整示例代码继承自 zh-cn/blurry-weaken-background.md原文档通过 VuePvuep交互编辑器承载了这段可直接运行、可现场改参的演示代码vuep template#blurry-weaken-background标签配合script typetext/x-template模板块渲染出一个左编辑器、右预览的实时示例相关样式与运行时分别见 assets/vuep.css 与 libs/vuep.min.js。完整代码如下vuep template#blurry-weaken-background/vuep script v-pre typetext/x-template idblurry-weaken-background style main { width: 100%; user-select: none; font: 14px / 1 Helvetica, sans-serif; } main { position: relative; padding: 30px 50px; hyphens: auto; text-align: justify; transition: .6s filter; } article.de-emphasized{ filter: blur(5px); } article .btn{ padding: 6px 1em; border-radius: 3px; outline: none; } dialog{ width: 400px; height: 120px; text-align: center; line-height: 84px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 .1em .2em rgba(0,0,0,.5), 0 0 0 50vmax rgba(0,0,0,.3); z-index: 99; } dialog:not([open]){ display: none; } /style template main article refarticle button classbtn clickhandleBtnClick($event)Show dialog/button pBacon ipsum dolor amet consectetur short loin ut tri-tip alcatra ground round jowl beef meatloaf in pork. Elit chicken ea spare ribs. Shank andouille ex boudin picanha turkey esse. Do doner fugiat tongue. /p pChuck filet mignon flank pork chop mollit enim veniam sed pork loin aliquip sausage prosciutto in deserunt. Nostrud porchetta non nulla sunt. Cupim et velit picanha laborum salami capicola exercitation alcatra sausage cillum shoulder minim esse. Pig boudin aliquip aute, tail ut cow incididunt short loin aliqua. /p pDoner alcatra pastrami pig, strip steak eu in frankfurter occaecat in filet mignon chuck short loin nulla meatloaf. Adipisicing aliqua kielbasa nulla proident. Ground round meatloaf kevin, shank adipisicing pork frankfurter t-bone spare ribs cupidatat. Sed ham non duis enim, in ipsum fugiat est tongue short ribs ad bresaola prosciutto. Non minim picanha, ad in occaecat fugiat veniam dolor deserunt. /p /article dialog refdialog clickhandleDialogClick($event) Hi~ Im a dialog. Click to close. /dialog /main /template script export default { methods: { handleBtnClick(e) { const { dialog, article } this.$refs; dialog.show(); article.classList.add(de-emphasized); }, handleDialogClick(e) { const { dialog, article } this.$refs; dialog.close dialog.close(); article.classList.remove(de-emphasized); } } } /script /script下面逐段拆解这段代码中每个声明的职责。filter: blur() —— 让背景内容失去焦点article.de-emphasized{ filter: blur(5px); }de-emphasized弱化是整套交互的状态类它被添加到文章容器article上后filter: blur(5px)会把整块内容按钮与全部正文渲染为 5px 模糊。blur()的取值是模糊半径数值越大越朦胧5px 是一个看得清轮廓、读不清文字的折中值实际项目中可按内容密度在2px8px之间微调。注意模糊对象是弹窗之外的article而不是整个页面——这正是本方案与毛玻璃效果见 zh-cn/frosted-glass.md的区别毛玻璃是给元素自身叠加半透明层并模糊其背后的底图而这里的 blur 是惩罚背景、衬托前景。box-shadow 的 50vmax 暗幕技巧dialog{ box-shadow: 0 .1em .2em rgba(0,0,0,.5), 0 0 0 50vmax rgba(0,0,0,.3); }这段声明同时包含两个阴影是压暗背景的核心机关第一个阴影0 .1em .2em rgba(0,0,0,.5)偏移与模糊都很小的常规投影给弹窗本体一个贴近边缘的柔和立体感第二个阴影0 0 0 50vmax rgba(0,0,0,.3)无偏移、无模糊但扩展半径spread高达 50vmax。vmax是视口宽高中较大者的单位50vmax 意味着阴影比任何一个方向上的视口尺寸都大于是以弹窗为中心向四周铺出一整层rgba(0,0,0,.3)的半透明暗幕等效于一块不依赖额外 DOM 节点的全屏遮罩。同一个技巧也被用在姊妹篇「通过阴影弱化背景」(zh-cn/shadow-weaken-background.md) 中box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8)。差别在于阴影文档单独依赖暗幕.3.8 的透明度可调而本文的方案把暗幕与 blur 叠加使用。transition 过渡与源码中的一处实现细节main { transition: .6s filter; }.6s filter意在让模糊效果平滑过渡而不是瞬间跳变。不过从源码结构看transition声明在main上而filter实际作用于子元素article.de-emphasized——CSS 过渡要求transition与被改变的属性位于同一个元素上才会生效。若希望打开/关闭弹窗时模糊效果真正渐变出现实践中应把过渡属性移到应用 filter 的元素上例如article { transition: filter .6s; } article.de-emphasized { filter: blur(5px); }这也是把演示代码落地到生产项目时值得顺手修正的一处细节。dialog 的定位、层级与暗幕的挂载方式dialog{ width: 400px; height: 120px; text-align: center; line-height: 84px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99; }main声明了position: relativedialog以position: absolutetop/left: 50%transform: translate(-50%, -50%)实现相对于正文容器的水平垂直居中z-index: 99确保弹窗盖在文章内容之上模糊后的article仍在弹窗之下示例调用的是dialog.show()而非dialog.showModal()show()以非模态方式显示弹窗不进入浏览器原生 top-layer也不提供原生::backdrop背景层因此这里的全屏暗幕完全由 box-shadow 手工铺设。相比之下阴影弱化文档中的第三个示例使用了showModal()配合dialog::backdrop { background: rgba(0, 0, 0, .8) }见 zh-cn/shadow-weaken-background.md那是利用原生背景层的另一种思路。dialog:not([open]) —— 显式的关闭态兜底dialog:not([open]){ display: none; }浏览器对dialog的原生默认样式通常已经隐藏了未打开无open属性的弹窗但不同浏览器、不同用户代理样式表的处理并不完全一致。这里显式声明没有open属性就不显示把关闭态的渲染行为固化下来同时为dialog.show()尚未生效的旧浏览器提供了一层防御。它也是该文档把dialog作为背景知识前置与css-boxshadow并列的原因所在。JavaScript 控制弹窗显隐与模糊状态export default { methods: { handleBtnClick(e) { const { dialog, article } this.$refs; dialog.show(); article.classList.add(de-emphasized); }, handleDialogClick(e) { const { dialog, article } this.$refs; dialog.close dialog.close(); article.classList.remove(de-emphasized); } } }交互逻辑非常直白两条路径互为镜像打开点击按钮 →dialog.show()显示弹窗 →article添加de-emphasized类触发 blur关闭点击弹窗本体 →dialog.close dialog.close()关闭弹窗 →article移除de-emphasized类撤销模糊。其中dialog.close dialog.close()的写法值得留意先用逻辑与运算符做能力探测避免在不支持close方法的旧实现中抛出异常。由于非模态show()打开后点击弹窗外区域并不会自动关闭示例直接把弹窗本身注册为click关闭入口是一种免遮罩监听的轻量交互方案。在仓库中运行与调试这段演示该仓库是一套基于 docsify 的 CSS 技巧文档站页面装配见 index.htmldocsify 配置见 libs/index.js中英文导航见 zh-cn/_sidebar.md 与 _navbar.md。「通过模糊弱化背景」被收录在侧边栏「用户体验」分组下。想本地查看这段演示可按 README.md 的快速开始步骤操作npm install docsify-cli -g docsify serve # 打开 http://localhost:3000 后进入 zh-cn/blurry-weaken-background在浏览器中打开对应页面后vuep 编辑器左栏就是上文那段可编辑代码改动任一 CSS 值如把blur(5px)改为blur(10px)、把50vmax改为30vmax都会实时反映到右侧预览中非常适合直观体验模糊半径与暗幕透明度对视觉效果的影响。与「通过阴影弱化背景」的对比与选型「通过阴影弱化背景」(zh-cn/shadow-weaken-background.md) 提供了三种弱化方案与本文档正好形成互补的选型参考方案实现要点效果侧重遮罩层方案额外.overlay绝对定位元素铺rgba(0,0,0,.8)纯压暗需要多一个 DOM 节点box-shadow 方案弹窗自身box-shadow: 0 0 0 50vmax rgba(0,0,0,.8)零额外 DOM纯压暗backdrop 方案showModal()dialog::backdrop原生背景层压暗模糊弱化本文blur 50vmax 暗幕压暗之上再叠加内容模糊选型建议如果只追求弹窗出现时页面变暗用 box-shadow 50vmax 或 backdrop 即可成本最低如果页面内容密集、文字较多仅压暗仍会让文字可读、分散注意力此时叠加filter: blur()是更彻底的选择。需要留意的是blur 是对整块渲染结果的高开销滤镜处理内容区域越大、半径越大GPU 负担越重因此建议把模糊半径控制在满足效果的最小值并避免对超大区域做实时动画。浏览器支持与兼容策略原文档在文末用 caniuse 内嵌图表分别给出了两个关键特性的支持情况css-boxshadow与dialog详见 zh-cn/blurry-weaken-background.md。结合仓库实践可以得出以下结论box-shadow与 50vmax 扩展阴影现代浏览器均已支持是本方案中最稳妥的一环dialog元素支持度弱于 box-shadow部分浏览器或旧版本对show/close、open属性的行为存在差异——这正是代码中dialog:not([open]) { display: none; }显式兜底、以及dialog.close dialog.close()能力探测存在的原因filter: blur()本文档未单独嵌入其支持图表仓库中「毛玻璃效果」文档对css-filters特性有独立图表见 zh-cn/frosted-glass.md同样可作为blur()的支持性参考。如 zh-cn/introduce.md 所述仓库示例未添加浏览器前缀面向生产环境时建议使用 Autoprefixer 等工具做兼容处理并针对目标用户群的浏览器版本做一次特性检测例如用supports (filter: blur(0))降级为纯压暗方案。小结一条可直接落地的弹窗焦点配方「通过模糊弱化背景」给出的其实是一份三行 CSS 一个dialog的极简配方article.de-emphasized { filter: blur(5px); }—— 模糊背景内容dialog { box-shadow: 0 0 0 50vmax rgba(0,0,0,.3); }—— 铺出全屏暗幕透明度按需调dialog.show() / close() 切换de-emphasized类 —— 用几行 JS 完成开合与状态同步。把它应用到真实项目时只需把 Vue 示例中的$refs换成原生document.querySelector或任意框架的节点引用把 blur 半径、暗幕透明度、z-index与过渡时长按设计稿微调即可。这套组合既没有引入额外遮罩 DOM也没有依赖 top-layer 的原生背景兼容面广、可读性强是弹窗需要聚焦感场景下一个值得收进工具箱的 CSS 技巧。赞分享前端文档教程【免费下载链接】You-need-to-know-cssCSS tricks for web developers~项目地址https://gitcode.com/gh_mirrors/yo/You-need-to-know-css点击查看免费下载相关推荐You-need-to-know-css 实战filter: blur 模糊弱化背景让 dialog 弹窗内容更聚焦You need to know css 实战filter: blur 模糊弱化背景让 dialog 弹窗内容更聚焦 弹窗Modal / Dialog弹前端文档教程You-need-to-know-css 毛玻璃效果实现解析filter blur 与半透明背景的叠加技巧You need to know css 毛玻璃效果实现解析filter blur 与半透明背景的叠加技巧 毛玻璃Frosted Glass效果是界面设计前端文档教程You-need-to-know-css 实战用 filter: drop-shadow() 实现不规则投影You need to know css 实战用 filter: drop shadow 实现不规则投影 导读本指南围绕 You need to know前端文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考