Разменете изображение с текст при печат

Използвам спрайтове за вмъкване на изображения на страница.

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

Проблемът с това решение е, че то показва цяло изображение на спрайт, съкратено до размерите на логото. Засега изглежда, че единственото решение е да се изрежат логата и да се използват отделни за печатната версия, което е неприятно. Някакви предположения?


css css-sprites
person santa    schedule 08.02.2013    source източник

Отговори (3)


arrow_upward
0
arrow_downward

Можете също да направите нещо по този начин, като използвате метода Kellum, както е посочено от Zeldman:

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 */
  }
}
person patrickhawley    schedule 08.02.2013

arrow_upward
2
arrow_downward

Опитайте тази:

Променете кода си на нещо подобно:

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

По този начин на екраните текстът е скрит, а при отпечатване текстът се вижда, а изображенията на спрайтовете са скрити.

person Cynthia    schedule 08.02.2013

arrow_upward
0
arrow_downward

Добавете желания печатен текст към HTML, както следва:

<div class="sprites logo1">Logo 1</div>

След това във вашия CSS на екрана добавете отрицателно text-indent, което ефективно ще скрие текста, когато го гледате на екран.

.logo1 {
  text-indent: -9999px; 
}

Във вашия CSS за печат нулирайте text-indent на 0, за да го покажете.

.logo1 {
    text-indent: 0;
}
person zakangelle    schedule 08.02.2013