简单的css时尚打印难题_Css_Printing

简单的css时尚打印难题

css printing

简单的css时尚打印难题,css,printing,Css,Printing,我试图用html+css“设计”一个封面，在浏览器中适当显示，完全适合（A4）页面，并用背景色打印。没有javascript——它必须转到epub2。随信附上我的第一次原型尝试。（实际的封面当然会更复杂。）坏消息是它已经不起作用了。更糟糕的是，它在linux下的firefox和chromium中的工作方式并没有什么不同——我甚至还没有尝试过safari、IE、OSX、iOS、Android和Windows 我不反对从头开始，只要我能保持html+css模式（即，如果可以避免的话，我不想用TeX

我试图用html+css“设计”一个封面，在浏览器中适当显示，完全适合（A4）页面，并用背景色打印。没有javascript——它必须转到epub2。随信附上我的第一次原型尝试。（实际的封面当然会更复杂。）

坏消息是它已经不起作用了。更糟糕的是，它在linux下的firefox和chromium中的工作方式并没有什么不同——我甚至还没有尝试过safari、IE、OSX、iOS、Android和Windows

我不反对从头开始，只要我能保持html+css模式（即，如果可以避免的话，我不想用TeX创建png位图像）

这能做到吗？还是该回到特克斯了？谢谢你的建议

问候,

/法律


身体{
颜色：#EEFFEE；
字体大小：粗体；
内部分页符：避免；
保证金：0；
填充：0；
}
* {
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
.第页{
宽度：21cm；
最小高度：29.7厘米；
背景色：黄色！重要；
颜色：黑色；
}
@页面{
尺寸：A4；
保证金：0；
}
@媒体印刷品{
.第页{
保证金：0；
分页符后：始终；
}
}
我的头衔{
颜色：红色；
背景颜色：蓝色；
文本对齐：居中；
}
标题
字幕
文本

因此，如果移动-webkit打印颜色调整按钮，则在修改代码时：精确；为了结束这种风格，我在chrome ie和firefox中也能使用它。你可以把代码扔进去，只要代码行在你的其他规则下面，你就会看到它是有效的。希望能有帮助

将以重置样式表开始。这将有助于消除浏览器之间的一些差异。确切的问题是什么？仅供参考，打印背景颜色通常是最终用户的设置/偏好（因为它可能会浪费大量墨水）确切的问题：css是否可以设计这个简单的一张A4的网页，从所有浏览器和操作系统以相同的方式打印，并且在页面顶部的蓝色背景前面有一个白色的居中标题？

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">

body {
    color: #EEFFEE;
    font-weight: bold;
    page-break-inside: avoid;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.page {
    width: 21cm;
    min-height: 29.7cm;
    background-color: yellow !important;
    color:black;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    .page {
    margin: 0;
    page-break-after: always;
    }
}

<!-- breaks color:  -webkit-print-color-adjust: exact; -->

div.mytitle {
  color:red;
  background-color: blue;
  text-align:center;
}

</style>

</head>


<body>

<div class="page">

  <div class="mytitle">

    <div style="margin:auto;font-size:100px;">Title</div>

    subtitle
  </div>

  text

</div>

</body>
</html>