CSSフィルタGoogle Chromeでは正しく機能しませんが、Mozilla Firefoxで完全に機能します

私はウェブサイトを作成しています。より具体的にはウェブショップであり、CSSフィルタプロパティを使用して画像をブラーリングしました。画像がぼやけて、テキストが表示されます。私が抱えている問題は、移行がmozilla上でとても素敵でスムーズに動作することですが、google chromeではscaffed.Iです。私は自分のウェブサイトのデザインにCSSグリッドを使用しています。CSSフィルタGoogle Chromeでは正しく機能しませんが、Mozilla Firefoxで完全に機能します

私はこれを修正する方法を知らず、このための解決策があります。

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

あなたが画像にカーソルを合わせると、あなたが見ることができますし、私の質問を読むためにGoogleのクロムを使用している場合は、画像が動いていることを確認することができますが、Mozillaでそれを行うかのようにそれは完全に動作します。誰かが私に答えることができればそれは可愛いでしょう。ありがとうございました。

出典

2017-12-30 Matija Vasko