Question

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

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

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

Answer 1

除非有人想出更好的解决方案，否则我最终会做的就是。与Sheikh Heera Link推荐的相似。

<强> 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-;
}

打印时显示背景图像？

1 个答案: