0

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

它在所有浏览器中都呈现精美，但是当我尝试打印页面时，图像会显示，但#headerdiv 的背景颜色不会。

我该如何解决？

4

5 回答 5

0

你可以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>
于 2012-08-12T15:24:19.577 回答
0

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

某些浏览器（例如 FireFox）可以让您管理它，但这是每个用户的设置。

于 2012-08-12T15:25:13.913 回答
0

你可以使用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，您可以这样做：

文件 > 页面设置... > 格式和选项 > 选项 > 打印背景（颜色和图像）

或者

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

于 2012-08-12T15:25:21.730 回答
0

我找到了解决办法！

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

这是我如何让图像显示以供打印但在任何其他时间都不可见：

我创建了一个名为的类.print-header，并在我的 main 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 图像标题，打印时显示单个图像标题。

于 2012-08-12T15:26:21.773 回答
0

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

这种方法称为 CSS sprite。您使用 CSS 定位来仅显示您想要在屏幕.header-left中显示的图像部分。.header-right对于打印，您可以展开.header-left以显示整个图像并隐藏标题右侧。这意味着您<img>在页面上少了一个，并且正在减少 HTTP 请求（一个用于图像，而三个用于图像）。

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

屏幕.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;
}

打印.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>
于 2012-08-12T16:11:11.773 回答