9

グレースケールで表示する必要があるページにいくつかの画像を表示しようとしています。ただし、マウスをホバーするとスムーズに色に移行します。IE、Chrome、Firefoxでうまく機能するようにしましたが、Safari5.xでは機能しません。問題は、SafariforMacとSafariforWindowsにあります。これが私がこれまでに持っているコードです：

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

最初の行は、外部の.svgフィルターをロードします（古いバージョンのFirefoxのバグurl("data:を回避したいので、...ルールでインライン化しません）。

2行目はIE用で、と同じように機能するようfilter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);です。

Webkitに関する最後の行は、Safari6以降とChromeで機能するはずです。

Safari 5.xで画像をグレースケールで表示するCSSルールはありますか？または、それが不可能な場合、誰かがjavascriptソリューション、できればグレースケールとの間のアニメーションを処理するソリューションを推奨できますか？グレースケール画像を使用したサーバー側のハッキングは避けたいと思います。これは、HTMLを台無しにし、条件付きでHTMLを提供するために厄介なブラウザー検出を行う必要があるためです。

ありがとう

編集：

これは「注目すべき質問」であることが判明したため、Safari 6以降でのみ機能する回答、またはデータURLに.svgファイルを含む回答をここに投稿し続けないでください。私がOPを書いたとき、今日非常に古いと考えられているSafariとFirefoxのいくつかのバージョンをサポートすることが重要でしたが、それでもそれが私の最初の質問でした。

最近のブラウザでは、数行のCSSコードでグレースケールフィルタリングを簡単に実行できることをよく知っていますが、このプロジェクトを行った時点では、グラフィックデザイナーはSafari 5.xを使用し、クライアントはFirefox3.xを使用していました。私のために働いた解決策は、Gionaが提案したものでした。つまり、Modernizrを使用してcssフィルタリングをテストし、サポートされていない場合はjavascriptにフォールバックすることです。

もし私が今日同じことをしていたら、私は両方に彼らのブラウザを更新するように言っているでしょう！

4

4 に答える 4

9

caniuse.comで確認できるように、CSS3フィルターは、現時点ではごく少数のブラウザーでサポートされています。

あなたがグーグル「javascriptグレースケールプラグイン」なら、多くのJavaScript/jQueryフォールバックがあります。ここにあるいくつかの：

しかし、私はそれらの経験がないので、どれが最高かをあなたに提案することはできません。

私はずっと前にjQueryBlackAnd Whiteを試しましたが、相対/絶対位置の画像で多くの問題が発生したので、避けてください。

このModernizrビルドをページに含めると、Javascriptを介してフィルターをサポートしていないブラウザーをターゲットにすることができます。

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

またはCSS：

.no-css_filters .element {
    /* css fallback here */
}

ああ、そしてウェブサイトがまったく同じすべてのブラウザを見る必要があることを忘れないでください？

于 2012-10-02T07:18:07.190 に答える
1

それは本当に簡単です、実際には：

javascriptフォールバックを使用してみましたが、実際には意味がなく、大きな画像では非常に低速でした。これはもっと理にかなっています。の新しい構文がありgrayscale、LESSから縮小されたCSSを手動で編集する必要があったことに注意してください。

これが私のミックスインです：

.filter (...) {
    -webkit-filter: @arguments;
    -moz-filter: @arguments;
    -ms-filter: @arguments;
    -o-filter: @arguments;
    filter: @arguments;
}

そして私のクラス：

.grayscale-hover, .home-image {
    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 10+, Firefox on Android see http://jsfiddle.net/KDtAX/487/*/
    .filter(grayscale(1) blur(1px));
    filter: gray; /* IE6-9 */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    &:hover {
        .filter(none);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    }
}

IE 6以降、Firefox、Chromeで動作し、テストされています。

于 2013-04-26T05:03:48.013 に答える
0

これはそのようなものです：

.grayscale {    
   filter: url(css/grayscale.svg#greyscale);    
   -webkit-filter: grayscale(1);    
   -moz-filter: grayscale(100%);    
   -ms-filter: grayscale(100%);    
   -o-filter: grayscale(100%);    
}

svgファイルもダウンロードする必要があります。

于 2013-03-09T11:24:15.100 に答える
0

これは私にとって素晴らしい働きをしました：

img { float:left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 1.5s ease;
       -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
            transition: all 1.5s ease;
            z-index: 40 !important;
             display:block;

 }

img:hover { 
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}

ただし、Safariでは画像が実際に露出オーバーに見えます（ただし、グレースケールです）。また、この移行はFirefoxではサポートされていません。

于 2013-05-21T12:40:28.870 に答える