仅在首页打印站点徽标（@media print）

Question

我需要创建网站的打印版本，正如我在标题中提到的，我需要在第一页上显示网站徽标。例如，如果我打印主页，我得到 5 页，徽标应该只显示在第一页上。

@media print 可以吗？

到目前为止我已经尝试过但是没有用

@media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
    display: none;
}
@page:first {
    .header .logo { display:block }
}

Answer 1

第一页的正确语法 (according to MDN) 是：

@page :first {
   /* .... */
}

两个组件之间没有 space。但是要小心，因为 @page :first 的兼容性没有明确定义。

虽然它甚至可能没有必要。我认为块级元素不会在每个页面上重复出现，因此您可能只需要确保徽标显示在 @media print { ... }.

中

您还需要检查该元素及其容器元素，以确保其中 none 个具有 position: fixed，因为这也可能导致该元素在每个打印页面上重复。

仅在首页打印站点徽标（@media print）

Print site logo just on first page (@media print )

html

css

css-paged-media