Css 仅对父容器应用模糊效果

发布于03月21日

Goal:我希望用户点击表单时背景模糊.因此，用户的注意力完全被吸引到表单上.

Problem:不幸的是，屏幕上的所有内容(父div容器和表单)都模糊了.

Question:我必须做什么才能使只有父容器模糊，而不是带有输入字段的框？

My code:

.container {
  width: 900px;
  margin: 0 auto;  
}

.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
}

.container:focus-within {
  filter: blur(4px);
}

<div class="container">
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div class="box">
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

.container { width: 900px; margin: 0 auto; } .box { padding: 40px 1px; margin: 0 auto; width: 500px; background: gray; text-align:center; } .container:focus-within>*:not(.box, input) { filter: blur(4px); }

<div class="container"> <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p> <div class="box"> <div> <input > <input > </div> </div> <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p> <input > </div>

Css 仅对父容器应用模糊效果

推荐答案

Css相关问答推荐

可折叠/可展开的数据表行：如何使Shadcn数据表中的可折叠内容全宽？

我应该在哪里放置expo /Reaction本地项目的CSS重置文件？

无法在 React 组件 (TypeScript) 中应用 Tailwind CSS 类

圆形按钮边框长度动画

CSS 布局：使一列依赖于另一列

在网格中整齐地对齐项目

flex-wrap 导致 children 身高加倍

是否有一个 CSS 可以根据字符的高度 for each 字符呈现可变高度？

我怎样才能将我的按钮向上移动，因为文本是

网格在行方向上的大小不正确

图像 3D 悬停效果

AngularJS Graphs & Charts - 实线和虚线的混合

你可以在 CSS 中扩展实体(entity)吗？

如何保持包装的弹性项目与前一行元素的宽度相同？

在 RC.1 中，某些样式无法使用绑定语法添加

隐藏在AngularJs中的可见性？

Bootstrap 3 Glyphicons CDN

CSS图像最大宽度设置为原始图像大小？

内联块列表项中不需要的边距

CSS 边距和填充速记属性顺序的助记符