9

これらのフィルターを使用して画像の彩度を下げています。

img {
    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");
    filter: gray;
    -webkit-filter: grayscale(1);
}

フィルターは Mobile Safari で画像をピクセル化するように見えますが、うまく機能します。なぜだかわかりません。明快さを保つ秘密の方法はありますか? それとも、このブラウザの欠点を受け入れなければなりませんか? 例として、iOS シミュレーターから取得したいくつかのスクリーンショットを並べて示します。

グレースケールフィルターあり

フィルターなし

4

2 に答える 2

0

モバイル サファリがフィルター スタイルを採用しているのか、それとも -webkit-filter を採用しているのかはわかりません。

-webkit フィルターでフィルター解像度を指定できるとは思わないので、このデフォルトの動作をオーバーライドしたい場合は、フィルター定義に filterRes=400 を追加するか、インライン svg に移動してフィルター別名に明示的な filterRes を指定します。

<svg>
   <defs>
     <filter id="greyscale" filterRes="1278">
        <feColorMatrix etc...>
     </filter>
   </defs>

Images...

</svg>
于 2012-12-13T21:09:35.257 に答える