如何使div的背景模糊？答案

【问题标题】：How to make background of div blurred?如何使div的背景模糊？
【发布时间】：2017-08-05 19:34:57
【问题描述】：

好的，现在我一直在 StackOverflow 上搜索类似的问题，但没有一个真正适合我的情况。所以我有一个覆盖整个网页的背景图片，在中间，我有一个 div，其中包含一些其他子 div（带有登录表单、一些段落等）我想要的是仅模糊与 div 重叠的背景图像部分。图片：

所以我只希望红色矩形中的图像部分模糊。如果我只是在主 div 中添加一个模糊过滤器，它只会模糊它的内容（文本和表单）。另外请记住，背景图片不是div的背景，而是整个页面的背景。

【问题讨论】：

<div> blur of part of Backgroung image with css的可能重复
还有这个：stackoverflow.com/questions/27583937/…

标签： html css

【解决方案1】：

试试这个，它可能会工作，

<div class="blur"></div>

<style>
.blur {
width:100%;
height:100%;
background-size:cover;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
-o-filter: blur(4px);
filter: blur(4px);
}
</style>

【讨论】：

只有模糊的背景在哪里？
在那个特殊的红色三角形中添加你的风格作为位置：绝对;并仅在其中添加模糊样式。希望对你有帮助

【解决方案2】：

在类中使用过滤器：blur('5px');

【讨论】：

只有模糊的背景在哪里？

【解决方案3】：

Arkej 的重复提及似乎符合您的需求。(<div> blur of part of Backgroung image with css)

诀窍是在html/body 上使用background-position:fixed; 并在其上使用要模糊的元素，因此，两个背景图像都位于窗口的同一区域。

副本使用了一个额外的元素，如果您不想修改 HTML 结构，这可以是一个伪元素。

Flex 也可以用于居中。

div {
  border:solid ;
  padding:6vw ;
  position:relative;
}
div:before{
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
  filter:blur(4px);
  background-size:100vw auto;
  /* makup ? */
  box-shadow:inset 0 0 0 50vw rgba(255,255,255,0.2)
}
/* makup to center content */
html {
  min-height:100%;
  display:flex;
  background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
  background-size:100vw auto
}
body {
  margin:auto;
}

&lt;div&gt;blur my background&lt;/div&gt;

http://codepen.io/gc-nomade/pen/MpvRGJ

【讨论】：

【解决方案4】：

在这里，这个例子将完成这项工作。这也与 Chrome、Opera、Edge、Firefox 和 Safari 兼容。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.section-blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(10px);
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="container section-blur">
  <div class="row">
    <div class="col">
      Sulhadin Öney
    </div>
    <div class="col">
      Sulhadin Öney
    </div>
  </div>
  <div class="row">
    <div class="col">
      Sulhadin Öney
    </div>
    <div class="col">
      Sulhadin Öney
    </div>
    <div class="col">
      Sulhadin Öney
    </div>
  </div>  
</div>

【讨论】：

【解决方案5】：

background-color: rgba(0, 0, 0, 0.61);

backdrop-filter: blur(5px);

一些解释： backdrop-filter 用于仅制作屏幕指定部分/区域的背景，您可以将其用于 div、图像和某些元素。 background-color 是可选的，并不总是必需的，以防您想让背景模糊更暗。支持 Firefox、Safari 和 Chrome。在这里查看文档https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter

【讨论】：

这是一个很好的解决方案。但是，请添加一些关于它如何工作以及为什么有用的解释。请看stackoverflow.com/help/how-to-answer
“支持 Firefox”是不正确的（至少在不更改 Firefox 偏好的情况下是这样，您不能期望网站访问者会这样做）。