当前位置：文江博客话题详情

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

发布于 2024-11-19 23:43:12 字数 319 浏览 3 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风也等你 2024-11-26 23:43:12

使用 Chrome 和 Safari，您可以添加 CSS 样式 -webkit -print-color-调整：精确； 强制打印背景颜色和/或图像的元素

回复收藏 0 原文

土豪我们做朋友吧 2024-11-26 23:43:12

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

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
    color-adjust: exact !important;                 /* Firefox 48 – 96 */
    print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
}

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:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
    color-adjust: exact !important;                 /* Firefox 48 – 96 */
    print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
}

回复收藏 0 原文

澉约 2024-11-26 23:43:12

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

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

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

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

在样式表的末尾，您添加：

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

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

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

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 @media print to the end of your stylesheet and change the body background slightly.

Example, if your current CSS looks like this:

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

回复收藏 0 原文

遇到 2024-11-26 23:43:12

您对浏览器的打印方法几乎没有控制权。您最多可以建议，但如果浏览器的打印设置有“不打印背景图像”，那么您就无能为力，除非重写页面以将背景图像变成恰好位于其他内容后面的浮动“前景”图像。

回复收藏 0 原文

客…行舟 2024-11-26 23:43:12

下面的代码对我来说效果很好（至少对于 Chrome 来说）。

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

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

The below code works well for me (at least for 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>

回复收藏 0 原文

伴随着你 2024-11-26 23:43:12

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

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

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

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

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

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

回复收藏 0 原文

零度° 2024-11-26 23:43:12

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

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

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

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

@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

-hanz

回复收藏 0 原文

苦行僧 2024-11-26 23:43:12

使用伪元素。虽然许多浏览器会忽略背景图像，但其内容设置为图像的伪元素在技术上不是背景图像。然后，您可以将背景图像大致定位在图像应该放置的位置（尽管它不像原始图像那么简单或精确）。

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

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

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

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

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

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

回复收藏 0 原文

桃扇骨 2024-11-26 23:43:12

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

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

注意：它不适用于整个主体，但您可以将其指定为内部元素或容器 div 元素。

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:

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

Note: It's not working on the entire body but you could speciy it for a inner element or a container div element.

回复收藏 0 原文

缺⑴份安定 2024-11-26 23:43:12

当您向背景图像添加 !important 属性时，它可以在 google chrome 中工作
确保您先添加属性并重试，您可以这样做

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

}

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

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

}

回复收藏 0 原文

如梦 2024-11-26 23:43:12

您可以使用固定颜色的边框。

 borderTop: solid 15px black;

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

    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;

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;

回复收藏 0 原文

苦笑流年记忆 2024-11-26 23:43:12

https://gist.github.com/danomanion/6175687 提出了一个优雅的解决方案，使用自定义项目符号代替背景图像。在此示例中，目标是将背景图像应用到具有 logo 类的 a 元素。（您应该将这些替换为您想要设置样式的元素的标识符。）

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

通过将其包含在

@media print {
}

块中，我可以将屏幕上呈现为背景图像的白色透明徽标替换为用于打印的透明黑色徽标。

https://gist.github.com/danomanion/6175687 proposes an elegant solution, using a custom bullet in place of a background image. In this example, the aim is to apply a background image to an a element with class logo. (You should substitute these for the identifier of the element you wish to style.)

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

By including this within a

@media print {
}

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.

回复收藏 0 原文

小霸王臭丫头 2024-11-26 23:43:12

您只需在打印时选中打印设置中的“背景图形”复选框即可在打印页面上显示背景图像。

回复收藏 0 原文

昇り龍 2024-11-26 23:43:12

你可以做一些这样的技巧：

<style>
    @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;
    }
</style>

在 body 标签中：

<img src="YOUR IMAGE URL" class="whater"/>

You can do some tricks like that:

<style>
    @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;
    }
</style>

In body tag:

<img src="YOUR IMAGE URL" class="whater"/>

回复收藏 0 原文

~没有更多了~

关于作者

↘人皮目录ツ

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（14）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。