Question

我正在开发需要打印证书的应用程序。

我正在使用Bootstrap，但已关闭打印CSS。这是普通（非打印）CSS证书的副本：

.certificate {
  background-image: url("images/paper.jpg");
  background-repeat: repeat;
  min-height: 800px;
  border: 80px solid transparent;
  border-image: url("images/border.png") 80 round;
  padding: 20px;
  display: flex;
}

我很好，不要在打印中使用flex。我实际上是从单独的角度打印，所以没什么大不了的。使用此CSS，边框图像在屏幕上可以很好地显示，但在打印中看起来超级破碎。

我正在尝试以下操作（因为我希望它可以横向打印）：

.print-certificate {
  background-image: url("images/paper.jpg");
  background-repeat: repeat;
  border: 20mm solid transparent;
  border-image: url("images/border.png") 10% round;
  width: 276mm;
  height: 190mm;
}

@page {
  size: auto;
  margin: 0mm;
}

尺寸略小一些，但边框图像和背景图像看起来仍然很差。好消息是，页面上实际上没有其他元素……只是证书。

我希望有任何建议！

CSS打印边框图像和正确尺寸

0 个答案: