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

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

提问by DisgruntledGoat

This question was asked beforebut 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.)

之前有人问过这个问题，但该解决方案不适用于我的情况。我想确保打印某些背景图像，因为它们是页面不可或缺的一部分。（它们不是页面中直接的图像，因为其中有几个被用作 CSS 精灵。）

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

关于同一问题的另一个解决方案建议使用list-style-image，它仅适用于每个图标都有不同的图像，不可能使用 CSS 精灵。

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

除了创建带有内联图标的单独页面之外，还有其他解决方案吗？

采纳答案by Marc B

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.

您几乎无法控制浏览器的打印方法。您最多可以建议，但是如果浏览器的打印设置有“不打印背景图像”，那么您必须重写页面以将背景图像转换为恰好位于其他内容后面的浮动“前景”图像。

回答by Marco Bettiolo

With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact;to the element to force print the background color and/or image

使用 Chrome 和 Safari，您可以-webkit-print-color-adjust: exact;向元素添加 CSS 样式以强制打印背景颜色和/或图像

回答by ckpepper02

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.

我找到了一种使用 CSS 打印背景图像的方法。这有点取决于您的背景布局，但它似乎适用于我的应用程序。

Essentially, you add the @media printto the end of your stylesheet and change the body background slightly.

本质上，您将@media print加到样式表的末尾并稍微更改正文背景。

Example, if your current CSS looks like this:

例如，如果您当前的 CSS 如下所示：

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

At the end of your stylesheet, you add:

在样式表的末尾，添加：

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

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 z-indexproper. But again, its up to how your page is laid out.

这会将图像作为“前景”图像添加到正文中，从而使其可打印。您可能需要添加一些额外的 CSS 以使其z-index正确。但同样，这取决于您的页面的布局方式。

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

当我无法在打印视图中显示标题图像时，这对我有用。

回答by Kevin vd Bosch

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:

默认情况下，浏览器可以选择关闭打印背景颜色和图像。您可以在 CSS 中添加一些行来绕过这一点。只需添加：

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

回答by Tarik

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

下面的代码对我很有效（至少对 Chrome 而言）。

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

我还添加了一些边距和页面方向控件。（纵向、横向）

<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>

回答by nuts-n-beer

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

确保使用 !important 属性。这极大地增加了您的样式在打印时被保留的可能性。

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

#example2 {
    background-color: #123456 !important;
}

回答by hanz

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.

就像@ckpepper02 所说的， body content:url 选项效果很好。然而，我发现如果你稍微修改它，你可以使用它来添加使用 :before 伪元素的标题图像，如下所示。

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

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

这会将图像滑到页面顶部，从我有限的测试来看，它适用于 Chrome 和 IE9

-hanz

-hanz

回答by Dtipson

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...

一个缺点是，要使其在 Chrome 中工作，您需要在打印媒体查询之外指定此行为，然后使其在打印媒体查询块中可见。所以，像这样的事情......

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

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

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.

缺点是图像通常会在正常页面加载时下载，从而增加了不必要的批量。您可以通过使用已用于原始可见图像的相同图像/路径来避免这种情况。

回答by Hady El-Hady

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

当您将 !important 属性添加到背景图像时，它在谷歌浏览器中工作，请确保先添加属性并重试，您可以这样做

    .inputbg {
background: url('inputbg.png') !important;  

}

}

回答by Victor Batista

You can use borders for fixed colors.

您可以将边框用于固定颜色。

 borderTop: solid 15px black;

and for gradient background you can use:

对于渐变背景，您可以使用：

    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;