CSS利用媒体查询控制网页打印部分区域只在网页显示,打印时不出现

2022-11-01 462点热度 0人点赞 0条评论

如题,需求是需要控制网页打印部分区域只在网页显示,打印时不出现。

实现

利用媒体查询,@media print 定义两个class:

  • .print-only是只有打印的时候出现,网页上不显示
  • .no-pirnt

    是只有网上上显示,打印的时候不出现指定的div或者元素,例如一些打印的按钮,可以设置成这种情况。

css代码如下:

.print-only {
    display: none;
}

@media print {
    .no-print {
        display: none;
    }
    .print-only {
        display: block;
    }
}

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论