我如何只模糊 div 而不是它的元素 [重复]答案

【问题标题】：how do i blur the div only and not its elements [duplicate]我如何只模糊 div 而不是它的元素 [重复]
【发布时间】：2017-10-27 08:16:25
【问题描述】：

    <style type="text/css">
.inner-container{
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur{

    z-index: 20;
}
.box{
    position:absolute;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}
</style>    

<div class="inner-container">
            <div class="box">
                <div id="noblur">
                    <h1> Login </h1>
                    <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
                    <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
                    {% if error is defined %}
                        <span class="error">{{ error }}</span>
                    {% endif %}
                <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>

                </div>
          </div>
        </div>

我只想模糊盒子而不是里面的元素，我试图从“noblur”div中删除模糊，将模糊设置为0，但什么也没发生 css result of the page

【问题讨论】：

您的问题不清楚
您可以使用伪元素绘制背景并对其应用模糊而不是元素本身。
你看到下面的SO Question / Answer了吗？这可能会有所帮助。
正如 Mohammad Usman 所说，唯一的选择是通过实际模糊另一个元素/伪元素来伪造它。不幸的是，您无法取消模糊元素的子元素。

标签： html css

【解决方案1】：

很遗憾，如果您对元素进行模糊处理（或使用透明处理），这也会影响所有子元素。

解决这个问题的唯一方法是获取模糊框的内容并将其放置为兄弟。而不是使用一些 CSS 将其置于顶部。

【讨论】：

【解决方案2】：

模糊任何元素总是会模糊里面的所有子元素。一种解决方法是对位于内容元素下方的元素产生模糊效果。

.inner-container {
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur {
    z-index: 20;
}
.blurbox {
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.13);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}
.box {
    position:absolute;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    padding:30px 0px;
    z-index: 2;
}

    <style type="text/css">

</style>    

<div class="inner-container">
  <div class="blurbox"></div>
  <div class="box">
    <div id="noblur">
      <h1> Login </h1>
      <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
      <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
      {% if error is defined %}
          <span class="error">{{ error }}</span>
      {% endif %}
  <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>
    </div>
  </div>
</div>

【讨论】：

为什么不用伪元素呢？模糊不是语义的，对页面的结构/内容没有任何意义，因此不应该在 HTML 中 - 它完全是展示性的，因此纯 CSS 的解决方案会更好。
我是个懒惰的家伙，所以我更喜欢将我的所有元素放在一个 div 中并对其应用一些 css，而不是将 css 一个一个应用到每个元素

【解决方案3】：

使用伪元素 (:before) 并使用 CSS 定位对 .box:before 进行模糊处理。另外，给#noblur 一个位置，因为z-index 与定位一起使用。喜欢：

#noblur {
    position: relative;
    z-index: 20;
}

.box {
    position:relative;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    z-index: 2;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.13);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 0;
}

看看下面的工作 sn-p：

.inner-container{
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur{
    position: relative;
    z-index: 20;
}
.box{
    position:relative;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    z-index: 2;
}
.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://images.pexels.com/photos/207171/pexels-photo-207171.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb');
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 0;
}

<div class="inner-container">
            <div class="box">
                <div id="noblur">
                    <h1> Login </h1>
                    <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
                    <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
                    {% if error is defined %}
                        <span class="error">{{ error }}</span>
                    {% endif %}
                <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>

                </div>
          </div>
        </div>

希望这会有所帮助！

【讨论】：

ooooohh 好的，我明白了！谢谢很多人^^
这是我的荣幸@Medy。如果此答案对您有所帮助，请点赞并接受此答案。