gpt4 book ai didi

html - CSS 在打印中创建整页无边距纯色背景

转载 作者:行者123 更新时间:2023-12-05 06:17:35 26 4
gpt4 key购买 nike

我试图在从 Chrome 打印时为整个打印页面设置纯色背景。页面上的内容是一个未知长度的动态列表,可能跨越多个页面。

为了去除白边,我使用@page 规则将边距设置为0 毫米。

有两个问题我还没有找到解决方案。

  1. 无法为后续页面的内容设置上边距
  2. 无法用纯色填充最后一页到底部

我得到的:

<html>    
<head>
<style>
@page {
margin: 0mm; }
html {
-webkit-print-color-adjust: exact;
background-color: coral;
font-size: 150%; }
h1 {
padding-top: 50mm;}
</style>
</head>
<body>
<h1>Items</h1>
<ul>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
<li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
</ul>
</body>
</html>

Chrome 中的打印渲染(来自保存的 pdf): enter image description here

最佳答案

我现在遇到了和你一样的问题。我已经找到了第二部分的解决方案,您可以在此处阅读:

Have margins for content but not background on every page when converting/printing HTML to PDF

这里:

https://stackoverflow.com/a/70079034/1222240

你必须创建一个位置为固定的div,然后宽度和高度为100%,设置z-index为0,然后你可以改变背景颜色,它会打印在每一页上

容器 div 需要有 position: relative 和 z-index: 1

第一个问题还没有找到解决方案

关于html - CSS 在打印中创建整页无边距纯色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61582214/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com