发表新帖
发表新帖

How to get a background image to print using css?

后端 未结
关注
10 513
再見小時候
再見小時候 2020-11-27 18:21

I am using the ASP Net Sprites package to create CSS Sprites on my website.

It is working, but the images it generates do not appear when printed.

The code g

相关标签:
10条回答
  • 温柔的废话
    2020-11-27 18:50 
    <div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

    This make sense of the CSS you posted, also see this website: https://defuse.ca/force-print-background.htm

    0 讨论(0)
  • 感情败类
    2020-11-27 18:51

    It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img /> tag.

    0 讨论(0)
  • 日久生厌
    2020-11-27 18:55

    It is working in Google Chrome when you add the !important attribute to the background image. Make sure you add the attribute first and then try again, you can do it like this:

    .class-name {
background: url('your-image.png') !important;
}

    Also you can use these useful printing rules and put them at the end of css file:

    @media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
    0 讨论(0)
  • 生来不讨喜
    2020-11-27 18:57

    For Chrome and Safari you can add the following in your CSS:

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

    For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)

    0 讨论(0)
  • 死守一世寂寞
    2020-11-27 19:01

    Try this:

    @media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}
    0 讨论(0)
  • 情深已故
    2020-11-27 19:02

    Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.

    <!DOCTYPE html>

    <html>

    <head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

    Here is the background image called in your main css file used in browsers.

    .bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

    And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.

    .bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

    Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.

    reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

    0 讨论(0)
 看不清?
提交回复
热议问题