我在 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>
最佳答案
将 scale3d(1.2,1.2,1)
更改为 scale(1.2)
在 Chrome 86.0.4240.198 上帮助了我。
关于html - css 比例变换和滤镜模糊的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56682502/