1

私が今持っているのは、私の画像をグレースケールするための次のコードです(ここでスタックオーバーフローにあります)。問題は、これも画像がぼやけることです。色をグレースケールに調整するだけで、写真のぼやけを変えないマトリックスが欲しいです。

CSS コード:

filter: url(svg/filters.svg#grayscale);
filter: gray; /* IE6-9 */
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+ */
-webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */
4

1 に答える 1

1

filterRes属性をいじってみてください。

中間イメージの幅と高さ (ピクセル単位)

画質に大きな影響を与える可能性があります。次の例を参照してください。

http://jsfiddle.net/Jxtjt/

<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png'>

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' filterRes='600'><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");
}
img:hover {
    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");
}

元のフィルターはピクセルのfilterRes設定を使用していますが600、少なくとも私のディスプレイでは問題ないように見えますが、他のディスプレイ、特に HI-DPI ディスプレイでは異なって見えるかもしれません。filterRes画像にカーソルを合わせると、属性が設定されていないフィルタが適用されていることがわかります。

ユースケースによっては、これが回避策になる場合があります。

私には、これは Firefox のバグのように見えます (バグ レポートを提出することをお勧めします)。仕様によると、ユーザーエージェントは、値が設定されていない場合に出力デバイスで適切に見える値を計算する責任があるため、Firefox が間違っている可能性があります。

于 2013-07-08T00:11:25.050 に答える