Question

我使用精灵在页面上插入图像。

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

此解决方案的问题在于它显示整个精灵图像，浓缩到徽标的尺寸。到目前为止，似乎唯一的解决方案是削减徽标并使用单独的徽标进行打印版本，这是一个无赖。有什么建议吗？

Answer 1

试试这个：

将您的代码更改为以下内容：

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

在屏幕上，文字被隐藏，打印时，文字可见，精灵图像被隐藏。

Answer 2

你也可以沿着这些方面做点什么，利用Kellum方法，as named by 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 */
  }
}

Answer 3

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

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

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

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

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

.logo1 {
    text-indent: 0;
}

交换图像与打印中的文本

3 个答案: