如何在没有模糊子元素的情况下模糊（CSS）div

Question

.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>

如果我不想使按钮模糊，我该怎么办？

Answer 1

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

.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>