css - 印刷された透明なpng / gifにグレーのアウトラインを追加するChrome

Question

私は、ブラウザーで PDF への印刷用の印刷テンプレートに取り組んでおり、1 つのセクションで透明な .png オーバーレイを使用しています。

これは、透明な .png ファイルと透明な .gif ファイルの両方で発生します。

Chrome は、(.pdf への印刷と印刷プレビュー ウィンドウの両方で) 印刷するときに、透明な画像の輪郭を 1px の灰色の線で囲んでいるように見えます。

展示物A:

他のいくつかのブラウザー (Safari を含む) でこれを試しましたが、Chrome と同じように動作するものはありません。誰もこれを見たことがありますか？これを無効にする方法を見つけるか、Chrome 側でハッキングして、これがブラウザー間で機能するようにする必要があります。

この動作を確認するには、http: //jsfiddle.net/brandonscript/nELwd/ (単なる<img />タグ) をクリックし、Cmd/Ctrl+P を押して印刷プレビューを表示します。これはプレビューで確認でき、.pdf に印刷すると表示されます。「背景の色と画像」が有効になっていることを確認してください。有効になっていないと、画像が表示されません。

注:印刷後の回避策を探しているわけではありません。画像のサイズを 100% にして .pdf を 100% ズームで表示すると、灰色の線が表示されないことは承知しています。.pdf を印刷する前に、プログラムで (またはその他の方法で)灰色の線を削除する必要があります。

Answer 1

私は十分に実験し、その間に上記のすべての答えを検討しました。怪しいことに、画像を保存して gimp で開き、いくつか突っ込むと、私が見つけたのはこれでした。

そのため、あなたの画像は実際には灰色の境界線を含んでいると思います。私の提案は、そのレイヤーを削除して、実際の画像の周りの空きスペースを透明にすることです。

編集(@remus コメントへの応答)

私の主張が正しいかどうかはわかりませんが、イメージはあなたが期待しているものではないと信じています. そのイメージを修正する必要があります。でテストしましたが、フィドルanother image of mineに貼り付けたところ、画面と印刷プレビューで境界線がありません。（そして最終的なpdfも）。この回答が正しく、あなたを傷つけている場合は申し訳ありません。

Answer 2

簡単な回答: PDF 印刷プリセットをより高い解像度に変更します。

あなたが得るでしょう：

長いバージョン:

HTML コードで幅と高さのプロパティを変更して、画像のサイズを変更していることに気付きました。そのため、画像が必要なサイズに正確に収まり、この奇妙な輪郭がないことを確認しました。

リンクを参照してください: jsfiddle.net/cyVqw/

印刷プレビューがあります：

PDF スクリーンショット:

どのサイズでもPDFが画像の透明度を維持することを確認するために、高解像度のプリセット、つまり「印刷品質」で保存されたPDFをチェックしました。これにより、ファイルが大きくなりましたが、ズームの品質が向上しました。

高解像度 33% のプレビューは次のとおりです。

高解像度 200% プレビュー

そのため、PDF 品質のプリセットを調整する必要があります。