1

.picture-box img {

display: inline-block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);

}

.picture-box img:hover {

filter: none; /* IE6-9 */
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);

-webkit-transition: all 2.0s ease-out;
-moz-transition: all 2.0s ease-out;
-ms-transition: all 2.0s ease-out;
-o-transition: all 2.0s ease-out;
transition: all 2.0s ease-out;

}

このコードの何が問題になっていますか? 遷移は Firefox では機能しません。21.0をインストールしました。

4

2 に答える 2

0

問題は、Firefox がまだ CSS フィルター効果をサポートしていない (29.0.1 の時点) ことです。そのため、コードの最初のブロックには、Firefox がサポートしている SVG フィルターの行が含まれています。CSS フィルター効果とは異なり、SVG フィルターは CSS でトランジションできません。

Firefox 用の純粋な CSS ソリューションについては知りませんが、JS を使用して対処する方法がいくつかあります (オーバーレイやフェードが可能な SVG または HTML5 キャンバス コピーで画像を動的に置き換えるなど)。この jQuery プラグインは、ほとんどのブラウザのすべてのベースをうまくカバーしています: https://github.com/karlhorky/gray

于 2014-06-04T17:11:01.787 に答える