情侣打印样式表问题

Question

我想做什么我认为不可能，但我还是问了=>

首先 - 我在打印时不显示图像，因为我的页面可能会使图像变重，或者至少有几个尺寸合适的图像会消耗墨水。那么是否可以不显示图像但显示图像的 ALT 文本，以便用户知道图像是什么。

第二 - 当用户打印表单时，表单的样式有点难看。有没有办法更改输入以仅显示输入的文本而不显示其他内容。

有一个与此类似的问题~Print Stylesheet - Converting inputs to text~我知道这可以使用 jQuery 来完成，但是有没有 CSS Only 方法来实现这个？

谢谢！

EDIT - 我想出了我的第二个问题。我将表单边框和背景设为白色以匹配页面。换句话说，它隐藏并仅显示文本。 =>

Answer 1

是的，有。它被称为@media，并且已经在主流浏览器中支持了一段时间。

所以，假设你有类似的东西：

<img class="no-print" src="image" /><span class="print">Image Label</span>

您的样式表可能类似于：

<stye>
   .print {display: none;} // only to be displayed when this is being printed so the default is to not display
   @media print {
      .print {display: inline}
      .no-print {display: none}
   }
</style>