Html CSS磨砂玻璃位置不正确

我正在尝试使用CSS实现磨砂玻璃效果，如下所示：

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

我设置了

背景尺寸：封面；背景附件：固定，但这并不能解决问题


#第二个包装器{
背景图像：url（“https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
背景附件：固定；
背景尺寸：封面；
背景位置：中心；
高度：250px；
宽度：500px；
}
#测试图像{
背景：继承；
位置：相对位置；
左：50%；
最高：50%；
溢出：隐藏；
高度：200px；
宽度：400px；
转换：翻译（-50%，-50%）；
}
#模糊{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：继承；
过滤器：模糊（5px）；
}

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

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

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

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


#第二个包装器{
背景图像：url（“https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
背景附件：固定；
背景尺寸：封面；
背景位置：中心；
高度：250px；
宽度：500px；
}
#测试图像{
背景：继承；
位置：相对位置；
左：10%；
排名前10%；
高度：200px；
宽度：400px；
/*转换：翻译（-50%，-50%）*/
}
#测试图像：之后{
内容：“；
背景：继承；
过滤器：模糊（10px）；
宽度：400px；
高度：200px；
显示：块；
}

T
完全正确！谢谢，问题在于转换，我不知道。然后，我想，我将使用
表格单元格
进行必要的垂直定位。谢谢！