在打印时显示背景图像? [英] Show background image when printed?

问题描述

我有一个使用 background-image 属性插入页面的图标.效果很好.但是，该图标为白色，并且在打印时不会显示.我有设置的打印样式表，但是打印时不显示图标.我认为这是因为我正在使用 background-image 属性，并且它不打印背景图像.解决此问题以使图标显示和打印的最佳方法是什么?

I have an icon that is inserted into a page using the background-image property. Works great. However the icon is white and when printed it doesn't show up. I have a print stylesheet I have setup but the icon doesn't show when printed. I assume this is because I am using the background-image property and it doesn't print background-images. What is the best way to work around this problem to get the icon to show and print?

CSS:

CSS:

 /* PAGE CSS */ 

.info-icon{
   width: 16px;
   height: 16px;
   padding: 0 10px;
   background-repeat: no-repeat;
   background-image: url(data:image/png;base64,-data-URI-code-) /* White Icon */;
}

 /* PRINT CSS */ 

.info-icon{
   width: 16px;
   height: 16px;
   padding: 0 10px;
   background-repeat: no-repeat;
   background-image: url(data:image/png;base64,-data-URI-code-) /* Black Icon */;
}

HTML

HTML

<p class="textcenter"><span class="info-icon"></span>Photo Info:</p>

推荐答案

除非最终有人提出了更好的解决方案，否则我将继续这样做.与Sheikh Heera的链接推荐的类似.

Unless someone comes up with a better solution here is what I ended up doing. Similar to what Sheikh Heera's Link recommended.

HTML:

<p class="textcenter">
  <img class="info-icon-black" src="data:image/png;base64, -DATA-URI-CODE-" />
  <span class="info-icon"></span>Photo Info:</p>

CSS:

/* PRINT STYLESHEET
-------------------------
SHOW BLACK INFO ICON  */

.info-icon-black{
    display:inline;
}

/* HIDE WHITE INFO ICON  */

.info-icon { 
    display:none; 
    /* I still hide in the event someone has print background
    images ticked on in print options. */
}


/* SCREEN STYLESHEET
-------------------------
HIDE BLACK INFO ICON  */

.info-icon-black{ 
    display:none;
}

/* SHOW WHITE INFO ICON  */

.info-icon{
  width: 16px;
  height: 16px;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64, -DATA-URI-CODE-;
}

这篇关于在打印时显示背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！