html - 整个 div 的磨砂玻璃效果无法正常工作

Question

我想要一个 div 完全被另一个看起来像磨砂玻璃的层覆盖。磨砂玻璃下的 div 将作为我的响应式网站的背景。它可以是渐变的，也可以像我的 fiddle 那样只是一张图片。我设法用效果覆盖了 div。然而，层的边缘之间仍然有一点缝隙，但我希望效果覆盖整个 div。谢谢。

.bg {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
  width: 100%;
  height: 500px;
  margin: 0;
}

.blurred-box {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: inherit;
  overflow: hidden;
}

.blurred-box:after {
  content: '';
  width: 100%;
  height: 100%;
  background: inherit;
  position: absolute;
  left: 0;
  left position right: 0;
  top: 0;
  bottom: 0;
  top position bottom: 0;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
}

<div class="bg">
  <div class="blurred-box"></div>
</div>

Answer 1

解决这个问题的一种方法是将 :after 设置为比容器大:

.bg {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
  width: 100%;
  height: 500px;
  margin: 0;
}

.blurred-box {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: inherit;
  overflow: hidden;
}

.blurred-box:after {
  content: '';
  width: 120%;
  height: 120%;
  background: inherit;
  position: absolute;
  left: -10%;
  top: -10%;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
  filter: blur(10px);
}

<div class="bg">
  <div class="blurred-box"></div>
</div>