Question

我的网站标题由两个图像组成（一个向左浮动，另一个向右浮动）一个#header div。

它在所有浏览器中呈现精美，但当我尝试打印页面时，图像会显示出来 #header div的背景颜色没有。

我该如何解决这个问题？

Answer 1

你可以这样使用media-query：

#header { width: 100%; height: 100px; }

@media screen
{ 
    #header > #left { background: url("display1.png"); }
    #header > #right { background: url("display2.png"); }
}

@media print
{ 
    #header > #left { background: url("print.png"); }
    #header > #right { display: none; }
}

然后插入HTML：

<div id="header">
    <div id="left"></div>
    <div id="right"></div>
</div>

Answer 2

浏览器现在很经济，默认情况下它们不再打印任何背景颜色。

像FireFox这样的浏览器允许您管理它，但这是每用户设置。

Answer 3

您可以使用media="print"：

<style type="text/css">
#img{background-image:url('img1.jpg');}
</style>
<style type="text/css" media="print">
#img{background-image:url('img2.jpg');}
</style>

但如果问题是浏览器不打印背景颜色并且您使用Firefox，则可以执行以下操作：

档案＆gt;页面设置...＆gt;格式＆amp;选项＆gt;选项＆gt;打印背景（颜色和图像）

或

Firefox按钮＆gt;打印...＆gt;页面设置...＆gt;格式＆amp;选项＆gt;选项＆gt;打印背景（颜色和图像）

Answer 4

我找到了解决方案！

我创建了第二个标题图像，它将两个原始图像组合在一起（加上一点填充使它看起来不错）仅用于打印。

以下是我将图像显示为打印但在其他任何时间都不可见的方法：

我创建了一个名为.print-header的类，在我的主要style.css中，我将其设置为：

.print-header { display:none }

在我的print.css中，我这样设置：

.print-header { display:block !important }
.header-left { display:none } /* this hides the original left header image when printing */
.header-right { display:none } /* this hides the original right header image when printing */

然后将我的HTML更改为：

<div id="header">
   <img src="/images/logo.gif" class="header-left" />
   <img src="/images/cta.gif" class="header-right" />
   <img src="/images/print-header.gif" class="print-header" />
</div>

瞧，瞧！在浏览器中，显示原始的2图像标题，并在打印时显示单个标题图像标题显示。

Answer 5

实际上辛西娅，如果你要做这样的事情，我会说最有意义的是使用print-header.gif图像作为两个图像的来源。

此方法称为CSS 精灵。您使用CSS定位仅在.header-left和.header-right屏幕中显示所需的图像部分。对于打印，您可以展开.header-left以显示整个图像并隐藏页眉右侧。这意味着你在页面上少了<img>并减少了HTTP请求（一个用于图像对三个）。

通常，此方法仅用于背景图像（这会将您带回到步骤1！），但它可以使用clip属性与前景图像一起使用。你的CSS将是：

<强> screen.css：

div#header {
    position: relative;
}

img.header-left {
    position: absolute;
    clip:rect(top, right, bottom, left);
}

img.header-right {
    position: absolute;
    clip:rect(top, right, bottom, left);
    top: offset;
    left: offset;
}

<强> print.css：

img.header-left {
    position: static;
    clip: auto;
}

img.header-right {
    display: none;
}

您的HTML可能是

<div id="header">
   <img src="/images/print-header.gif" class="header-left" />
   <img src="/images/print-header.gif" class="header-right" />
</div>

如果打印则如何显示一个图像，如果在浏览器中查看则另一个

5 个答案: