CSS / HTML / Javascript技巧可以打印没有图像的网页

Question

我正在尝试在网页上放置一个打印按钮，用于打印除图像之外的页面内容。有什么想法吗？

Answer 1

只有在打印时，您才可以使用CSS禁用网站上的所有图片。

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

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

Answer 2

除非您想让人们选择打印图像或没有图像，否则无需使用按钮。

如果您只是希望人们在没有图像的情况下进行打印（大部分时间都是首选），您可以使用打印样式表。

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

然后添加

img {display: none;}

Answer 3

您需要打印样式表。有两种选择：

1. 使用以下代码引用单独的样式表： <link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>

   在该样式表中，输入以下内容：

   img {
       display: none;
   }
   

2. 将以下内容放在主样式表中：

   @media print {
       img {
         display: none;
   }
   

Answer 4

您可以将样式表用于打印媒体，并制定如下规则..

img { visibility:hidden; }

...

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

您也可以使用display:none作为图像规则，但这不会保留间距，并且可以完全更改打印页面的布局。