html - 如何在不模糊子元素的情况下模糊(css)div

Question

这个问题在这里已经有了答案:





How to apply a CSS filter to a background image

(19 个回答)


12 个月前关闭。

.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

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

有一个替代解决方案:在你的父元素中创建两个元素 div – 一个 div用于背景和另一个 div对于内容。套装position:relative在父级 div并设置 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>

如果您在内容上看到背景 mask ，请使用 the z-index property发送第二个内容后面的背景div .