以下は個人的見解です. 出典もありませんし, より適切な方法があるかもしれません.
HTML印刷時の文字の色はbackground-color
等の背景設定と, ブラウザの印刷設定における「背景色・画像の印刷有無」によって変化します(印刷した文字を正しく読めるようにブラウザが勝手に設定を上書きしてしまう).
そのため, いかなる場合においても「黒色背景で白抜き文字を印刷する」ことを実現するのは困難であり, 諦めた方がよいと思います.
なお文字の印字品質を犠牲にしてよいのであれば, 印刷専用のSVGフィルタを用意することで擬似的に「黒色背景の白抜き文字」を作ることは可能です.
CSS
1div{
2 background-color:black;
3 color: white;
4}
5@media print{
6 div{
7 background-color:transparent;
8 filter: url(#f);
9 }
10}
HTML
1<svg width="0" height="0">
2 <defs>
3 <filter id="f" width="100%" height="100%">
4 <feFlood flood-color="black" result="bg"/>
5 <feFlood flood-color="white"/>
6 <feComposite in2="SourceAlpha" operator="in"/>
7 <feMerge>
8 <feMergeNode in="bg"/>
9 <feMergeNode/>
10 </feMerge>
11 </filter>
12 </defs>
13</svg>
14<div>
15ああああ
16</div>
なおSVGフィルタの動作原理上, 白抜き対象のノードにはborder
やbackground-image
等の装飾スタイルを一切指定することが出来なくなるため, やはり事実上無理と捉えたほうが良いかもしれません.
※この他にも「canvas要素で画像にしてしまう」「SVGでテキストを表示する」と言った方法が考えられますが, 印刷のためだけにHTML構造を弄るのが適切かどうかは判断つきかねます.
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/08 12:50