Question

我正在创建一个网站，更具体地说是一个网上商店，我使用CSS过滤器属性来模糊图像，所以当我将鼠标悬停在图像上时图像模糊并出现文本。我遇到的问题是转换在mozilla上工作非常顺畅，但在Google Chrome上它有点磨损。我正在使用CSS网格进行网站设计。

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

这是HTML和CSS代码。

＆＃13;

   

 .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)";
    }

＆＃13;

    <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>

＆＃13;

正如您可以看到当您将鼠标悬停在图像上时，如果您使用谷歌浏览器来阅读我的问题，您可以看到图像正在移动，但如果您在Mozilla中这样做，则效果非常好。如果有人能回答我那将是可爱的。谢谢。

Answer 1

有同样的问题。尝试了新的Google网站，它按预期工作。可能只是旧网站不支持它。

CSS过滤器属性在Google Chrome上无法正常运行，但在Mozilla Firefox

1 个答案: