如何使div的背景模糊？

Question

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

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

Answer 1

background-color: rgba(0, 0, 0, 0.61);
    
backdrop-filter: blur(5px);

backdrop-filter 是一个 CSS 属性，用于模糊网页上指定元素或区域的背景。它可以用于 div、图像和其他元素。它在 Chrome 和 Firefox 103 及更高版本中受支持。可选的 background-color 可用于使背景更暗。有关详细信息，请参阅官方文档。 https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter

对于 Safari：

-webkit-backdrop-filter: blur(5px);

Answer 2

Arkej 的重复提及似乎符合您的需要。（

使用 css 模糊背景图像的一部分）

诀窍是在

background-position:fixed;

/

html

上使用

body

和元素在它上面模糊，所以，两个背景图像都位于窗口的同一区域。

副本使用了一个额外的元素，如果你不想修改 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;
}

<div>blur my background</div>

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

在这里，这个例子将完成工作。这也与 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">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
  </div>
  <div class="row">
    <div class="col">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
  </div>  
</div>

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

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

我找到了这个解决方案，我正在寻找相同的 CSS 解决方案。

代码笔： https://codepen.io/DesignersWeb/pen/MWqyqKq

  .blur {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    overflow: hidden;
    filter: blur(13px);
    position: absolute;
    background-size: cover;
    background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=") no-repeat center center fixed;
  }

  .content {
    padding: 20px;
    font-size: 18px;
    position: relative;
  }

<div class="">
  <div class="blur"></div>
  <div class="content">
      <h3>What is Lorem Ipsum?</h3>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
  </div>
</div>

您可以使用backdrop-filter: blur(2px);

Answer 3

在这里，这个例子将完成工作。这也与 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">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
  </div>
  <div class="row">
    <div class="col">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
  </div>  
</div>

Answer 4

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

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

Answer 5

我找到了这个解决方案，我正在寻找相同的 CSS 解决方案。

代码笔： https://codepen.io/DesignersWeb/pen/MWqyqKq

  .blur {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    overflow: hidden;
    filter: blur(13px);
    position: absolute;
    background-size: cover;
    background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=") no-repeat center center fixed;
  }

  .content {
    padding: 20px;
    font-size: 18px;
    position: relative;
  }

<div class="">
  <div class="blur"></div>
  <div class="content">
      <h3>What is Lorem Ipsum?</h3>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
  </div>
</div>

Answer 6

您可以使用backdrop-filter: blur(2px);