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 移动。

尝试取消注释转换并在devtools中更改翻译的值

#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毛玻璃的位置不正确

1 个答案: