画像なしのWebページを印刷するCSS/HTML/Javascriptのトリック

Question

画像以外のページの内容を印刷するWebページに印刷ボタンを配置しようとしています。何か案は？

Answer 1

を追加します。

あなたは印刷メディア用のスタイルシートを使用すると、以下のようにルールを作ることができ

@media print { 
    img { 
    display: none !important; 
    } 

    * { 
    background-image: none !important; 
    } 
} 

Answer 2

人が画像を印刷するか画像を印刷しないかを選択しない限り、ボタンを使用する必要はありません。

人が画像なしで印刷したい場合（これはほとんどの場合好ましい）、印刷スタイルシートを使用することができます。

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

その後、あなたは印刷する場合にのみ、あなたのウェブサイト上のすべての画像を無効にするには、CSSを使用することができます

img {display: none;}

Answer 3

..

img { visibility:hidden; } 

...

<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print"> 

ます。また、画像ルールとしてdisplay:noneを使用することができますが、これは間隔を保持せず、印刷ページのレイアウトを完全に変更することができます。

Answer 4

印刷スタイルシートが必要です。

1. リファレンス次のコードで、別のスタイルシート：そのスタイルシートで <link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>

   次を入れ、：そのための2つのオプションがあります

   img { 
       display: none; 
   } 
   

2. あなたに次のように入れてメインスタイルシート：

   @media print { 
       img { 
        display: none; 
   }