2

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

1 回答 1

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-;
}
于 2012-07-04T20:11:18.623 回答