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

Question

我希望div能够完全被另一层看起来像磨砂玻璃的层覆盖。磨砂玻璃下的div将成为我的响应式网站的背景。它可以是渐变，也可以只是我小提琴中的图片。我设法用效果掩盖了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>

Answer 2

此外，您可以尝试缩放模糊图像容器并隐藏.bg上的溢出：

.bg {
    overflow: hidden;
}

.blurred-box:after {
    transform: scale(1.08, 1.08);
}

并在padding: 0; margin: 0;上设置body以摆脱小偏移。有些样式是多余的。所以，我的尝试：

＆＃13;

＆＃13;

body {
   padding: 0;
   margin: 0;
}
.bg {
  position: relative;
  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;
  overflow: hidden;
}

.blurred-box {
  width: 100%;
  height: 100%;
  background: inherit;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;