CSS 毛玻璃位置不正确

Question

我正在尝试使用 CSS 实现磨砂玻璃效果，如下所示：https://codepen.io/GreggOD/full/xLbboZ

但我想，我遗漏了一些东西，因为它显示了完整的图像，但尺寸较小

我已设置 background-size: cover; background-attachment: fixed;，但这并不能解决问题

#second_wrapper {
  background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 250px;
  width: 500px;
}

#test_image {
  background: inherit;
  position: relative;
  left: 50%;
  top: 50%;
  overflow: hidden;
  height: 200px;
  width: 400px;
  transform: translate(-50%, -50%);
}

#blur {
  position: absolute;
  height: 100%;
  width: 100%;
  background: inherit;
  filter: blur(5px);
}

<div id='second_wrapper'>
  <div id='test_image'>
    <div id='blur'>
    </div>
  </div>
</div>

Answer 1

这是你想要的吗？我向 #test_image:after

添加了新的 css 规则

  background: inherit;
  position: relative;
  left: 10%;
  top: 10%;
  height: 200px;
  width: 400px;
  /*transform: translate(-50%, -50%);*/

请注意，在这种情况下您不能使用 transform，因为当您变换时，继承的背景图像也会移动与 div.

尝试取消注释 transform 并更改 devtools 中 translate 的值

#second_wrapper {
  background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 250px;
  width: 500px;
}

#test_image {
  background: inherit;
  position: relative;
  left: 10%;
  top: 10%;
  height: 200px;
  width: 400px;
  /*transform: translate(-50%, -50%);*/
}

#test_image:after {
  content: "";
  background: inherit;
  filter: blur(10px);
  width: 400px;
  height: 200px;
  display: block;
}

<div id='second_wrapper'>
  <div id='test_image'>
    <div id=''>
      T
    </div>
  </div>
</div>

CSS 毛玻璃位置不正确

CSS frosted glass positioned incorrectly

html

css

blur