Поменять местами изображение с текстом в печати

Я использую спрайты для вставки изображений на страницу.

<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

Вы также можете сделать что-то подобное, используя метод Келлума, по имени Зельдмана:

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