我需要创建网站的打印版本,正如我在标题中提到的,我需要在首页上显示网站 Logo 。例如,如果我打印主页,我得到 5 页, Logo 应该只显示在第一页上。
@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 }
}
最佳答案
第一页的正确语法(according to MDN)是:
@page :first {
/* .... */
}
两个组件之间没有空格。但是要小心,因为 @page :first
的兼容性没有明确定义。
虽然它甚至可能没有必要。我认为 block 级元素不会在每个页面上重复出现,因此您可能只需要确保 Logo 显示在 @media print { ... }
中。
您还需要检查该元素及其容器元素,以确保它们都没有 position: fixed
,因为这也可能导致该元素在每个打印页面上重复。
关于html - 仅在首页打印站点 Logo (@media print),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43593612/