CSSだけで画像をモノクロ表示にすることはできるが印刷には表示されない

harada 269views 更新:2015年6月22日

以下のクラス指定などをモノクロ表示にしたい画像につけることで、モニター上でカラー画像をモノクロ表示にすることができます。

.grayscale {
  filter: gray;
  -webkit-filter: grayscale(100%);
  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");
}

ですが、これを行った画像はなぜか印刷に表示されません。
解決策を探したのですが、見つからず、この方法でのモノクロ表示は断念しました…。

参考:JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません