本文介绍了无法打印背景色(CSS解决方案)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试学习如何启用 chrome 中的打印背景色页面:

Im trying to learn how to enable print background-colors pages in chrome :

例如> http://angularjs.org/

主页是:

因此,如果我单击print()并标记背景色和图像"-它的确显示了将来要打印的背景色:

So If I click print ( ) and mark the "background colors and images" - it does show the background colors which are future to be print :

好的.

但是,如果我导航到另一页 http://docs.angularjs.org/tutorial /step_02 中也带有背景色:

But If I navigate to another page http://docs.angularjs.org/tutorial/step_02 which also have background colors in it :

当我尝试打印它时-我在预览窗格中看到它没有颜色:

And when I try to print it - I see it in the preview pane without colors :

我的问题是:他们是如何做到的? (或更妙的是,如何使它打印背景色?)

My question is : how did they do that ? ( or better , how can I make it print background colors ?)

我已经阅读了 此处 -webkit-print-color-adjust:exact;

所以我通过chrome开发人员工具栏将其添加到了html中,但没有帮助. (当我再次单击

so I added it to the html via chrome developer toolbar , but it didn't help. ( when I clicked again

我应该在CSS中进行哪些更改才能使其还打印背景颜色?

What should I change in the css in order for it to print also background colors ?

相关信息,搜索@media,在以下位置找到了它:

related info , searching for @media , found it under :

但是我在那里没有找到任何相关信息.

But I didn't find any related info there.

推荐答案

好吧,我想无论如何您都没有理解我的意思,所以很简单,比如说拥有一个元素,例如

Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like

<div class="blow"></div>

background设置为tomato,因此要使其正常工作,首先必须确保已设置media打印集,例如

With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like

@media print {
  /* Declarations go here */
}

OR

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


现在,您需要声明的是


Now, what you have to declare is

-webkit-print-color-adjust: exact;在属性块中,例如

@media print, screen { /* Using for the screen as well */
    .blow {
        height: 100px;
        width: 100px;
        background: tomato;
        -webkit-print-color-adjust: exact;
    }
}

演示 (仅适用于webkit浏览器,例如Chrome /Safari)

Demo (Only for webkit browsers i.e Chrome/Safari)

在上面的演示中,即使在Chrome的打印预览窗口中,您也应该能够看到红色方框.

In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.

正如您所评论的,它对我有用.

As you have commented, it works for me..

OR

对相同内容的支持是肮脏的,有关该属性的更多信息,您可以参考 MDN

Support for the same is dirty, for more information on the property, you can refer MDN

身体元素背景未打印

当前两者均未打印 Chrome或Safari会打印body元素的背景.如果这 属性被设置为与body元素完全相同,它将仅适用于 它的后代.

Body element backgrounds are not printed

Currently neither Chrome nor Safari print backgrounds of the body element. If this property is set to exact for the body element, it will apply only to its descendants.

剪切背景图像时(例如,使用 背景图片图片),原因是铬虫131054 ,他们会 从Chrome浏览器打印时,显示失真 -webkit-print-color-adjust:精确.纯色背景和未裁剪的背景图片(即宽度和高度比 应用于它们的元素)正确打印.

When background images are clipped (for example, when using background-image sprites), due to Chromium bug 131054, they will appear distorted when printed from the Chrome browser with -webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the element to which they are applied) are printed correctly.

WebKit错误 64583 :"WIP:添加CSS属性以控制打印各个元素的背景"
CSSWG Wiki:"打印背景"-对此进行标准化的提案 财产

WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
CSSWG wiki: "print-background" - a proposal to standardize this property

这篇关于无法打印背景色(CSS解决方案)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 02:09
查看更多