CSS中的Div背景模糊效果

Question

我正在开发一个网站，需要给div后面的背景变成蓝色，并且我无法通过CSS找到实现方法。

我找到了一篇文章，介绍了如何做到这一点，但我没能精确地复制它。

这是那篇文章：https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

这是我的页面：http://biolinks.redxte.ch/blur

如果有人知道我哪里出错了，请告诉我，谢谢。

- RedXTech

---

你好，我又来了。我刚刚在查看我的过去的代码片段时发现了这个 https://jsfiddle.net/RachGal/81v5ge58/。它是一个在悬停时模糊背景但不模糊文本的东西。看一下，你可能会发现一些有用的东西。 - Rachel Gallen

Answer 1

backdrop-filter: blur(10px);

它将模糊元素后面的区域。

- W.Leto

---

只有Edge和Safari支持这个滤镜。https://caniuse.com/#search=backdrop-filter - daslicht

现在，Chrome和Android也支持backdrop-filter。请参考https://caniuse.com/#search=backdrop-filter。 - Thurstan

现在可以了吗？仍然不支持火狐浏览器，这真是遗憾。 - rlatief

根据 caniuse.com 的数据，backdrop-filter 属性将会在即将发布的 Firefox 稳定版（103）中加入，预计发布日期为 2022 年 07 月。 - Kristián Filo

奇怪的错误。使用背景过滤器时，滚动时会覆盖粘性元素。（MS Edge：Chromium） - Artis Zel

现在也可以在Firefox上正常工作 :) - Ale

Answer 2

你已经非常接近了！

移除.name-container上的position: relative，并将其添加到.head。

更新：

删除.name-bg（如有必要，请使用display: none），并将.name的z-index改为1或更高。然后添加此代码。

.name:after {
  content: "";
  display: block;
  position: absolute;
  background-position: center -373px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(10px);
  border-radius: 8px;
  z-index: -1;
}

.head, .name:after {
  background-size: 1500px auto; /* Really, this */
  background-position: center; /* and this is the only code .head needs  */
  background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}

注意：由于该站点的使用，您不得不设置绝对background-size。此外，由于使用了@media代码，您需要稍微调整一下代码。

希望这可以帮到您！

- Chris Happy

---

可以运行，但不完全符合我的需求。这会使整个背景模糊，而不仅仅是.name div后面的部分。 - RedXTech

@RedXTech 我已经在你的网站上测试过并且使其正常工作了。你也能做到吗？ - Chris Happy

Answer 3

将模糊滤镜添加到 #pp css (在你的 .name class 中使用的 img id)，并从 name-bg 中删除它（它会影响整个背景）。这应该对你有更好的效果。10px 可能有点太多了。我预览了一下它（见图像）

希望这可以帮助到您

编辑：

经过仔细查看您的代码（并看到您的评论，澄清了问题），您已经将边距设置为0 auto围绕名称容器，并且name-bg class已经被此大小调整（它正在通过添加顶部/右侧/底部/左侧坐标进行更改），我将上/右/左/下调整为2或-2（请参见fiddle），这减小了背景div的大小。我还将定位更改为relative，以便在调整大小时仍然可以居中显示。

https://jsfiddle.net/RachGal/rhav95o1/ ：fiddle

我认为这更接近您要寻找的内容。

- Rachel Gallen

---

在第一张发布的图片中，我忘记关闭webkit模糊效果了...实际上看起来还不错。 - Rachel Gallen

感谢您的所有努力，但我并没有在那个小提琴上看到模糊。 - RedXTech

@RedXTech 增加模糊度或模糊区域即可。我在这里协助你，而不是替你完成工作。 - Rachel Gallen

出于某种原因仍然没有任何东西。 - RedXTech

很好。顺便说一下，我为你的问题点了赞。感谢你的投票。希望它能帮助你至少接近一个解决方案。 - Rachel Gallen

Answer 4

又一个实现。请注意，缺点是您必须复制文本以便在两个位置获得相同的高度（可能可以使用JS或其他方法来使其更加简洁）

HTML：

<div class="outer">
  <div class="inner">
    <h1>Blurred box</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
  </div>
  <div class="inner with-text">
    <h1>Blurred box</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
  </div>
</div>

scss：

@import "compass/css3";

$normal-img: "https://upload.wikimedia.org/wikipedia/commons/8/84/San_Stefano_Grand_Plaza%2C_Alexandria%2C_Egypt.jpg";

.outer{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:url($normal-img);
  background-repeat:no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.inner {
  background-image:url($normal-img);
  background-repeat:no-repeat;
  @include background-size(cover);
  background-attachment: fixed;
  filter:blur(6px);
  width:500px;
  left:-webkit-calc( 50% - 250px );
  top:20%;
  position:absolute;
  @include box-sizing(border-box);
  color: transparent;
  &.with-text {
    color: white;
    opacity: .5;
    filter: none;
    background: grey;
  }
}

pen: https://codepen.io/anon/pen/BxgyNR?

- Eduardo La Hoz Miranda