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's 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 に答える