Question

我不是CSS的专家，所以如果我的问题对专家来说可能看起来很愚蠢，请提前告诉我。

我正试图找出一种方法，使我的网站的产品页面在打印时看起来更好。

为此，我正在尝试添加一个背景图片，其标题中包含徽标，页脚和左侧边距中的消息。为了显示这些背景元素，我在我的模板的custom.css文件中设置了页面的大小和边距（我正在使用Joomla CMS）。这是我使用的代码（正确地执行了我的意思，即使内容显示在设置的边距内）：

@page {
  /* set size of printed page */
  size:210mm 297mm;      
  margin-top:25mm;
  margin-bottom: 12mm;
  margin-right: 3mm;
  margin-left: 8mm;
}

然后，在页面的.css文件中，我添加了以下代码：

body { 
  background-color: white !important;
  background-image: url('/images/print/sfondo-pdf_v2.jpg') !important;
  background-position: 0px 0px !important;             
  background-size: 100% auto !important;
  background-repeat: repeat-y !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;             
}

问题是，背景不包含在页面的总大小（即210mm 297mm）中，而是包含在先前设置的边距内。

我想知道我应该怎么做才能仅背景忽略@page边距。

我希望我已经清楚地解释了我的观点，并提前感谢你们！

在打印视图的{page边距上调整背景图像

0 个答案: