html - CSS 过滤器属性在 Google Chrome 上无法正常工作，但在 Mozilla Firefox 上可以正常工作

Question

我正在制作一个网站，更具体地说是一个网上商店，我使用 CSS 过滤器属性来模糊图像，所以当我将鼠标悬停在图像上时，图像会模糊并出现文本。我遇到的问题是，在 mozilla 上过渡效果非常好且流畅，但在谷歌浏览器上它有点磨损。我正在使用 CSS 网格设计我的网站。

我不知道如何解决这个问题，是否有任何解决方案。

这是 HTML 和 CSS 代码。

   

 .bigPicture{
    	display:inline-block;
    	position:relative;
    }
    .blur{
    	position:absolute;
    	top:45%;
    	color:white;
    	opacity:0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	-webkit-transition:all 0.5s ease;
    	transition:all 0.5s ease;
    	right:33%;
    }
    .contentPicture{
    	-webkit-transition:all 0.5s ease;
    	transition:all 0.5s ease;
    }
    .bigPicture:hover img{
    	-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="5" /></filter></svg>#filter');
        filter: blur(5px);
    }
    .bigPicture:hover .blur{
    	opacity:1;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    <div class="bigPicture">
    		<a href="#">
    			<div><img class="contentPicture" src="https://www.w3schools.com/css/trolltunga.jpg" height=300 width=100%></div>
    			<div class="blur"><h1>Započnite kupovinu</h1></div>
    		</a>
    	</div>
    

当您将鼠标悬停在图像上时，您会看到，如果您使用谷歌浏览器阅读我的问题，您会看到图像在移动，但如果您在 mozilla 中这样做，它会完美运行。如果有人能回答我，那就太好了。谢谢。

Answer 1

遇到了同样的问题。尝试了新的 Google 站点，它按预期工作。可能只是旧站点不支持而已。