blocks|key|624701|text|您几乎无法控制浏览器的打印方法。您最多只能提出建议，但如果浏览器的打印设置为“不打印背景图像”，那么如果不重写页面，将背景图像转换为位于其他内容后面的浮动“前景”图像，您就无能为力了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624702|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.

blocks|key|624782|text|我找到了一种用CSS打印背景图像的方法。这有点取决于你的背景是如何布局的，但它似乎适用于我的应用程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|624783|实际上，您需要将@media+print添加到样式表的末尾，并稍微更改正文背景。|offset|length|style|CODE|624784|例如，如果您当前的CSS如下所示：|624785|body+{
background:url(images/mybg.png)+no-repeat;
}|code-block|syntax|javascript|624786|在样式表的末尾，添加：|624787|@media+print+{
body+{
+++content:url(images/mybg.png);
++}
}|624788|这会将图像作为“前景”图像添加到正文中，从而使其可打印。您可能需要添加一些额外的CSS以使z-index正确。但同样，这取决于你的页面如何布局。|624789|当我无法在打印视图中显示标题图像时，这对我很有效。|624790|entityMap^0|0|8|C|0|0|0|0|0|19|7|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application. 

Essentially, you add the <code>@media print</code> to the end of your stylesheet and change the body background slightly.

Example, if your current CSS looks like this:

<pre><code>body {
background:url(images/mybg.png) no-repeat;
}
</code></pre>

At the end of your stylesheet, you add:

<pre><code>@media print {
body {
 content:url(images/mybg.png);
 }
}
</code></pre>

This adds the image to the body as a "foreground" image, thus making it printable.
You may need to add some additional CSS to make the <code>z-index</code> proper. But again, its up to how your page is laid out.

This worked for me when I couldn't get a header image to show up in print view.

blocks|key|840831|text|使用psuedo-element。虽然许多浏览器会忽略背景图像，但从技术上讲，内容设置为图像的psuedo-element不是背景图像。然后，您可以将背景图像大致定位在图像应该到达的位置(尽管它并不像原始图像那样简单或精确)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|840832|一个缺点是，为了在Chrome中工作，您需要在打印媒体查询之外指定此行为，然后使其在打印媒体查询块中可见。所以，像这样的东西...|840833|.image:before{
++++++++visibility:hidden;
++++++++position:absolute;
++++++++content:+url("your/image/path");
++++}+++

@media+print+{
.image{
+++position:relative;
++++}
++++.image:before{
+++++++visibility:visible;
+++++++top:etc...
++++}+++++++
}|code-block|syntax|javascript|840834|缺点是，图像通常会在正常的页面加载时下载，从而增加了不必要的容量。您可以通过使用与原始可见图像相同的图像/路径来避免这种情况。|840835|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).

One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...

<pre><code>.image:before{
 visibility:hidden;
 position:absolute;
 content: url("your/image/path");
 } 

@media print {
.image{
 position:relative;
 }
 .image:before{
 visibility:visible;
 top:etc...
 } 
}
</code></pre>

The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.

blocks|key|625073|text|就像@ckpepper02所说的，body+content:url选项工作得很好。但是，我发现如果稍微修改一下它，就可以只使用它来添加一个标题图像，并使用:+the伪元素进行排序，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625074|@media+print+{
++body:before+{+content:+url(img/printlogo.png);}
}|code-block|syntax|javascript|625075|在我有限的测试中，它可以在Chrome和IE9上运行|625076|-hanz|625077|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Like @ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.

<pre><code>@media print {
 body:before { content: url(img/printlogo.png);}
}
</code></pre>

That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9

-hanz

blocks|key|840932|text|使用Chrome和Safari，您可以将CSS样式-webkit-print-color-adjust:+exact;添加到元素以强制打印背景色和/或图像|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|840933|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust^0|P|Y|P|Y|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

With Chrome and Safari you can add the CSS style <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust"><code>-webkit-print-color-adjust: exact;</code></a> to the element to force print the background color and/or image

blocks|key|625189|text|确保使用!important属性。这极大地增加了打印时保留样式的可能性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625190|#example1+{
++++background:url(image.png)+no-repeat+!important;
}

#example2+{
++++background-color:+#123456+!important;
}|code-block|syntax|javascript|625191|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Make sure to use the !important attribute. This dramatically increases the likelihood your styles are retained when printed.

<pre><code>#example1 {
 background:url(image.png) no-repeat !important;
}

#example2 {
 background-color: #123456 !important;
}
</code></pre>

blocks|key|625255|text|下面的代码对我来说很好用(至少对Chrome来说是这样)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625256|我还添加了一些页边距和页面方向控件(纵向、横向)。|625257|<style+type="text/css"+media="print">
@media+print+{
++body+{-webkit-print-color-adjust:+exact;}
}
@page+{
++++size:A4+landscape;
++++margin-left:+0px;
++++margin-right:+0px;
++++margin-top:+0px;
++++margin-bottom:+0px;
++++margin:+0;
++++-webkit-print-color-adjust:+exact;
}
</style>|code-block|syntax|javascript|625258|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The below code works well for me (at least for Chrome).

I also added some margin and page orientation controls.(portrait, landscape)

<pre><code>&lt;style type="text/css" media="print"&gt;
@media print {
 body {-webkit-print-color-adjust: exact;}
}
@page {
 size:A4 landscape;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
 margin: 0;
 -webkit-print-color-adjust: exact;
}
&lt;/style&gt;
</code></pre>

blocks|key|625306|text|默认情况下，浏览器会关闭其打印背景色和图像的选项。您可以在CSS中添加一些行来绕过这一点。只需添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625307|*+{
++++-webkit-print-color-adjust:+exact+!important;+++/*+Chrome,+Safari,+Edge+*/
++++color-adjust:+exact+!important;+++++++++++++++++/*Firefox*/
}|code-block|syntax|javascript|625308|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this.
Just add:
<pre><code>* {
 -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */
 color-adjust: exact !important; /*Firefox*/
}
</code></pre>

blocks|key|841136|text|当你给背景图片添加重要属性时，它在google+chrome中工作。确保你先添加属性，然后再试一次，你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841137|++++.inputbg+{
background:+url('inputbg.png')+!important;++|code-block|syntax|javascript|841138|}|841139|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

it is working in google chrome when you add !important attribute to background image
make sure you add attribute first and try again, you can do it like that

<pre><code> .inputbg {
background: url('inputbg.png') !important; 
</code></pre>

}

blocks|key|625402|text|你可以像这样做一些技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625403|<style>
++++@page+{
++++++++size:+21cm+29.7cm;
++++++++size:+landscape
++++++++/*margin:+30mm+45mm+30mm+45mm;*/

++++}
++++.whater{
++++++++opacity:+0.05;
++++++++height:+100%25;
++++++++width:+100%25;
++++++++position:+absolute;
++++++++z-index:+9999;
++++}
</style>|code-block|syntax|javascript|625404|在body标签中：|625405|<img+src="YOUR+IMAGE+URL"+class="whater"/>|625406|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can do some tricks like that:

<pre><code>&lt;style&gt;
 @page {
 size: 21cm 29.7cm;
 size: landscape
 /*margin: 30mm 45mm 30mm 45mm;*/

 }
 .whater{
 opacity: 0.05;
 height: 100%;
 width: 100%;
 position: absolute;
 z-index: 9999;
 }
&lt;/style&gt;
</code></pre>

In body tag:

<pre><code>&lt;img src="YOUR IMAGE URL" class="whater"/&gt;
</code></pre>

blocks|key|625450|text|您可以对固定颜色使用边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625451|+borderTop:+solid+15px+black;|code-block|syntax|javascript|625452|对于渐变背景，您可以使用：|625453|++++box-sizing:+border-box;
++++border-style:+solid;
++++border-top:+0px;
++++border-left:+0px;
++++border-right:+0px;
++++border-image:+linear-gradient(to+right,+red,+blue)+100%25;
++++border-image-slice:+1;
++++border-width:+18px;|625454|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can use borders for fixed colors.

<pre><code> borderTop: solid 15px black;
</code></pre>

and for gradient background you can use:

<pre><code> box-sizing: border-box;
 border-style: solid;
 border-top: 0px;
 border-left: 0px;
 border-right: 0px;
 border-image: linear-gradient(to right, red, blue) 100%;
 border-image-slice: 1;
 border-width: 18px;
</code></pre>

blocks|key|625502|text|https://gist.github.com/danomanion/6175687提出了一个优雅的解决方案，使用自定义项目符号代替背景图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|625503|+++a.logo+{
+++++display:+list-item;
+++++list-style-image:+url("../images/desired-background.png");
+++++list-style-position:+inside;
+++}|code-block|syntax|javascript|625504|通过将其包含在|625505|@media+print+{
}|625506|块中，我可以将屏幕上呈现为背景图像的透明白色徽标替换为透明黑色徽标进行打印。|625507|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/danomanion/6175687^0|0|16|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<a href="https://gist.github.com/danomanion/6175687" rel="nofollow noreferrer">https://gist.github.com/danomanion/6175687</a> proposes an elegant solution, using a custom bullet in place of a background image:

<pre><code> a.logo {
 display: list-item;
 list-style-image: url("../images/desired-background.png");
 list-style-position: inside;
 }
</code></pre>

By including this within a 

<pre><code>@media print {
}
</code></pre>

block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.

This question <a href="https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie">was asked before</a> but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)

Another solution on that same question suggests using <code>list-style-image</code>, which only works if you have a different image for every icon, no CSS sprites possible.

Aside from creating a separate page with the icons inline, is there another solution?

How can I force browsers to print background images in CSS?

这个问题，但解决方案不适用于我的情况。我想确保打印某些背景图像，因为它们是页面的组成部分。(它们不是直接出现在页面中的图像，因为其中有几个用作CSS精灵。)关于这个问题的另一个解决方案建议使用list-style-image，只有当你为每个图标都有一个不同的图像时才有效，不可能使用CSS sprites。除了创建一个单...

问如何强制浏览器在CSS中打印背景图像？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制浏览器在CSS中打印背景图像？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何强制浏览器在CSS中打印背景图像？
EN