网页劫持强制弹窗怎么解决_打印网页时强制使用准确的颜色

最新推荐文章于 2024-04-28 10:18:48 发布

cungui5726

最新推荐文章于 2024-04-28 10:18:48 发布

阅读量181

点赞数

文章标签： css css3 html5 html java

原文链接：https://thenewcode.com/573/Force-Accurate-Colors-When-Printing-Web-Pages

版权

网页劫持强制弹窗怎么解决

Modern browsers alter colors when printing web pages, which is entirely reasonable: few people wish to sacrifice an entire toner cartridge to a web page’s black background. But this behavior can be problematic: browser print routines will also remove background images, gradients, shadows and other effects, which can be important in the presentation of certain pages, such as portfolios.

现代浏览器在打印网页时会改变颜色，这是完全合理的：很少有人希望将整个Selenium鼓牺牲到网页的黑色背景上。但是这种行为可能会带来问题：浏览器的打印例程还将删除背景图像，渐变，阴影和其他效果，这在某些页面(例如文件夹)的显示中可能很重要。

Firefox has the Print Background Colors option in its Print dialog, which remains under the exclusive control of the user. Chrome and Safari will follow a particular CSS property to force accurate colors on elements when printing:

Firefox在其“ 打印”对话框中具有“ 打印背景颜色”选项，该选项仍由用户独占控制。 Chrome和Safari将遵循特定CSS属性，以在打印时在元素上施加准确的颜色：

* {
	-webkit-print-color-adjust: exact;
}

While you can apply -webkit-print-color-adjust to any selector at all, the property will not work on the <body> background (again, saving that toner cartridge). However, it will work on child elements.

尽管您可以将-webkit-print-color-adjust应用于所有选择器，但该属性在<body>背景上不起作用(再次保存该碳粉盒)。但是，它将对子元素起作用。

I would recommend erring on the side of caution when using the -webkit-print-color-adjust property: a reasonable assumption is to only use it for portfolio pages sent to a color printer, or other exceptions. This behavior can be specified with an embedded @media query on appropriate pages:

我建议在使用-webkit-print-color-adjust属性时要谨慎一些：合理的假设是仅将其用于发送到彩色打印机的投资组合页面，或其他例外情况。可以在适当的页面上通过嵌入式@media查询指定此行为：

@media print and (color) {
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
		/* presentation rules for the page on color printers */
}

Another media query within the central linked style sheet (styles.css) should cover all other print options:

中央链接的样式表( styles.css )内的另一个媒体查询应涵盖所有其他打印选项：

/* main styles.css presentational rules */
	@media print and (monochrome) {
	/* presentation rules for black-and-white printers, not concerned with color accuracy */
	}

The embedded @media query will also work with the Print To PDF option for those without printers, generating an accurate digital copy of the portfolio page. (I’d suggest providing a PDF version of the portfolio as a download option also: you can use the same print routine to generate it, or a tool like Prince).

对于没有打印机的用户，嵌入式@media查询还将与“ 打印到PDF”选项一起使用，从而生成投资组合页面的准确数字副本。 (我建议您还提供PDF格式的投资组合作为下载选项：您可以使用相同的打印例程来生成它，或者使用Prince之类的工具)。

There are two possible improvements to this approach:

此方法有两个可能的改进：

It would be helpful to warn those with color printers that printing a portfolio page may consume more ink;
警告那些使用彩色打印机的人，打印投资组合页可能会消耗更多的墨水；这将很有帮助。
For the highest print quality, we should deliver high-DPI Retina images to the printer.
为了获得最高的打印质量，我们应该向打印机提供高DPI Retina图像。

Both of these possibilities will be addressed in future articles.

这两种可能性将在以后的文章中讨论。