1

スプライトを使用して、ページに画像を挿入します。

<div class="sprites logo1"></div>
<div class="sprites logo2"></div>

ただし、ページを印刷すると、背景イメージを印刷するように設定を変更しない限り、何も印刷されません。

ロゴではなくテキストを印刷したい。通常、画像を div 内に配置して非表示にして表示すること@media screenは@media printできますが、スプライトの処理方法がわかりません。

印刷に望ましい結果は次のようになります。

<div>logo1</div>
<div>logo2</div>

スプライト用の私のCSSはこれに似ています：

.sprites{
   background: url(../logos.png) no-repeat top left
}
.logo1{
   background-position: 0 0;
   width: 184px;
   height: 57px
}
.logo2{
   background-position: 0 -60px;
   width: 175px;
   height: 34px
}

だから私はこれを追加することで私はそれを正しくするかもしれないと思った:

@media print {
   .logo1{ 
      content: url(../logos.png) no-repeat 0 0;
      width: 184px;
      height: 57px
   }
}

このソリューションの問題は、ロゴのサイズに凝縮されたスプライト画像全体が表示されることです。これまでのところ、唯一の解決策はロゴを切り取って印刷版に別のものを使用することであると思われますが、これは残念なことです。助言がありますか？

4

3 に答える 3

2

これを試して：

コードを次のように変更します。

<div class="sprites logo1"><h1>Logo 1 Text</h1></div>
<div class="sprites logo2"><h2>Logo 2 Text</h1></div>

次に、印刷メディアの CSS で次のようにします。

.sprites .logo1 { background-color:white !important ; background-image:none !important }
.sprites .logo2 { background-color:white !important ; background-image:none !important }

そしてあなたのスクリーンCSSで：

.sprites .logo1 h1 { display:none !important }
.sprites .logo2 h2 { display:none !important }

そうすれば、画面上ではテキストが非表示になり、印刷時にはテキストが表示され、スプライト画像は非表示になります。

于 2013-02-08T17:19:02.770 に答える
0

Zeldman によって命名された Kellum Method を使用して、これらの行に沿って何かを行うこともできます。

HTML:

<div class="sprites logo1">Text Here</div>
<div class="sprites logo2">Text Here</div>

CSS:

@media screen {
  .sprites {
    background: url(../logos.png) no-repeat top left
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .logo1{
    background-position: 0 0;
    width: 184px;
    height: 57px
  }
  .logo2{
    background-position: 0 -60px;
    width: 175px;
    height: 34px
  }
}

@media print {
  .sprites {
    /* style this text as desired for print */
  }
}
于 2013-02-08T17:36:59.833 に答える