如何在不模糊子元素的情况下模糊（css）div [重复]答案

【问题标题】：How to blur(css) div without blur child element [duplicate]如何在不模糊子元素的情况下模糊（css）div [重复]
【发布时间】：2015-05-12 14:19:00
【问题描述】：

.content {
  float: left;
  width: 100%;
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
}

.info {
  float: left;
  margin: 100px 0px 0px 30px;
  width: 410px;
}

<div class="content">
  <div class="opacity">
    <div class="image">
      <img src="images/zwemmen.png" alt="" />
    </div>
    <div class="info">
      a div wih all sort of information
    </div>
  </div>
</div>

如果我不想模糊按钮，我需要做什么？

【问题讨论】：

这个想法有帮助吗：codepen.io/Dzomba/pen/npdfh（即你能把 unblur 放在子元素上吗）
jsfiddle.net/L8ksa46g/5 如果按钮不能是子元素......也许是这样的？ p.s.按钮在行内，但在 .col-lg-3 之外？
@TarynEast 很好，我可以用 .blur:hover 另一个选择器代替吗？
@nevermind，现在按钮在 div 中，我不确定我要更改的内容包括
已经得到答复。 stackoverflow.com/questions/22406478/…

标签： html css blur

【解决方案1】：

使用blur 或opacity 属性时，无法忽略子元素。如果您将这些属性中的任何一个应用于父元素，它也会自动应用于子元素。

还有另一种解决方案：在父级div 中创建两个元素——一个div 用于背景，另一个div 用于内容。在父元素div 上设置position:relative 并将position:absolute; top:0px; right:0px; bottom:0px; left:0px;（或将高度/宽度设置为100%）设置为背景的子元素。使用这种方法，div的内容将不受后台属性的影响。

例子：

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div id="parent_div">
  <div id="background"></div>
  <div id="textarea">My Text</div>
</div>

如果您看到内容被背景遮盖，则使用the z-index property 发送第二个内容div 后面的背景。

【讨论】：

解决一个愚蠢问题的好方法。为什么你不能在孩子身上覆盖filter - 不知道我理解为什么这个属性会破坏 CSS 继承规则

【解决方案2】：

如何在子元素上禁用模糊？

.enableBlur>* {
  filter: blur(1.2px);
}

.disableBlur {
  filter: blur(0);
}

<div class="enableBlur">
  <hr>
  qqqqq<br>
  <span>qqqqq</span><br>
  <hr  class="disableBlur">
  <div>aaaaa</div>
  <div>bbbbb</div>
  <div class="disableBlur">DDDDD</div>
  <hr>
  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>

【讨论】：

谢谢。我错过了>* 的关键部分：单独对孩子而不是对父母应用模糊，这样孩子就可以单独取消模糊。

【解决方案3】：

只需创建两个分区并调整它们的 z-index 和边距，使您想要模糊的分区位于您想要显示在顶部的分区之下。

PS：不要在分区内创建分区，因为子级会继承父级的属性。

#forblur {
  height: 200px;
  width: 200px;
  background-color: blue;
  margin: auto;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px) -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: -1;
}

#on-top-container {
  margin: auto;
  margin-top: -200px;
  text-align: center;
  height: 200px;
  width: 200px;
  z-index: 10;
}

<div id="forblur">
</div>
<div id="on-top-container">
  <p>TEXT</p>
</div>

【讨论】：

【解决方案4】：

我的解决方案似乎有点简单，但可能存在一些兼容性问题。我刚刚使用了 backdrop-filter 和模糊滤镜。

backdrop-filter: blur(2px);

【讨论】：

仅适用于相当新的浏览器，FF >=70，否则是个好主意！