html - css 比例变换和滤镜模糊的问题

Question

我在 Chrome 浏览器上组合两个属性时遇到问题:filter: blur(15px) 和 transform: scale3d(1.2,1.2,1)。

我有两张图片，一张在另一张上面。更高层上的图像模糊，但当我应用该过滤器时它的边缘变得透明，所以我将 overflow:hidden 添加到父 div，并放大图像。我希望看到图像的不透明部分。

它在 Firefox 和 Opera 上按预期工作，但在 Chrome 和 MS Edge 浏览器上却不行。如何解决这个问题？

#images-box{
  position: relative;
  width: 500px;
  height: 280px;
  overflow:hidden;
}

.image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
  background-size: cover;
  background-position: 50% 50%;
}
.image.blured{
  -webkit-filter: blur(14px);
  filter: blur(14px);
  z-index: 2;
  -webkit-transform: scale3d(1.2,1.2,1);
  transform: scale3d(1.2,1.2,1);
}

<div id="images-box">
  <div class="image"></div>
  <div class="image blured"></div>
</div>

Answer 1

将 scale3d(1.2,1.2,1) 更改为 scale(1.2) 在 Chrome 86.0.4240.198 上帮助了我。