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

这个解决方案的问题在于，它显示了一个完整的 sprite 图像，压缩到了 logo 的尺寸。到目前为止，似乎唯一的解决方案是剪掉徽标并为印刷版使用单独的徽标，这很可惜。有什么建议么？

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 方法，沿着这些思路做一些事情：

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 回答
0

将所需的打印文本添加到 HTML，如下所示：

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

然后，在您的屏幕 CSS 中，添加一个否定的text-indent，这将在屏幕上查看文本时有效地隐藏文本。

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

在您的打印 CSS 中，将 重置text-indent为 0 以显示它。

.logo1 {
    text-indent: 0;
}
于 2013-02-08T18:07:06.883 回答