CSS 필터 Google 크롬에서는 제대로 작동하지 않지만 Mozilla Firefox에서는 완벽하게 작동합니다.

Question

웹 사이트를 만들고 웹 사이트를 좀 더 구체적으로 설정하고 CSS 필터 속성을 사용하여 이미지를 블러 링했습니다. 이미지가 흐리면 텍스트가 나타납니다. 내가 가지고있는 문제는 전환이 mozilla에서 매우 훌륭하고 원활하게 작동한다는 것입니다. Google chrome에서 다소 scuffed.I입니다. 내 웹 사이트 디자인에 CSS 그리드를 사용하고 있습니다.

이 문제를 해결하는 방법을 모르고 있으며 이에 대한 해결책이 있습니다.

다음은 HTML 및 CSS 코드입니다. 당신은 당신이 이미지 위에 마우스를 올려 당신이 내 질문을 읽어 구글 크롬을 사용하는 경우 이미지가 움직이는 것을 볼 수 있지만, 때 볼 수 있듯이

 

 
.bigPicture{ 
 
    \t display:inline-block; 
 
    \t position:relative; 
 
    } 
 
    .blur{ 
 
    \t position:absolute; 
 
    \t top:45%; 
 
    \t color:white; 
 
    \t opacity:0; 
 
    \t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    \t -webkit-transition:all 0.5s ease; 
 
    \t transition:all 0.5s ease; 
 
    \t right:33%; 
 
    } 
 
    .contentPicture{ 
 
    \t -webkit-transition:all 0.5s ease; 
 
    \t transition:all 0.5s ease; 
 
    } 
 
    .bigPicture:hover img{ 
 
    \t -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{ 
 
    \t opacity:1; 
 
    \t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    }

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

당신은 모질라에서 그렇게 할 경우 그것은 완벽하게 작동합니다. 누군가가 나를 대답 할 수 있다면 그것은 좋을 것입니다. 고맙습니다.

Answer 1

같은 문제가있었습니다. 새 Google 사이트를 사용해 보았는데 의도 한대로 작동했습니다. 아마도 이전 사이트가 지원하지 않는 것일뿐입니다.