Question

我正在尝试＆＃34;工程师＆＃34; html + css中的封面页面，在浏览器中正确显示，完全适合（A4）页面，并使用背景颜色打印。没有javascript ---它必须去epub2。我附上了我对原型的第一次尝试。（实际封面当然会更复杂。）

坏消息是，它已经无法正常工作了。更糟糕的消息是它在linux下的Firefox和Chrome中的工作方式不同 - 我甚至还没有尝试过Safari，IE，OSX，iOS，Android和Windows。

我不反复重新开始，只要我能保持在html + css范例中（即，如果可以避免，我不想在TeX中创建一个png位图像。）

这可以吗？还是时候回到TeX了？建议表示赞赏。

的问候，

/ IAW

<?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>

Answer 1

因此，如果移动-webkit-print-color-adjust：exact，则修改代码;结束风格它适用于chrome ie和firefox。您可以在http://www.onlinehtmleditor.net/中抛出代码，只要该行位于其他规则下方，它就会发挥作用。希望能帮助到你。

威尔

简单的css时尚印花困境

1 个答案: