HTML文档的打印版本上的不同样式

Question

我正在使用HTML来创建一个简单的Web应用程序。这将创建一个表单，并让用户通过简单的UI表单获取所需信息，从而获得计算机系统填写和设置的表单。

现在我遇到的问题是表格的布局在两种情况下都不同。在主页面中，我有 2 元素，这些元素位于具有背景图像的整个页面上。但问题是，在印刷版中，它们并不相同。

图片要么没有在页面上显示，要么......有点乱。看看，

正确的标记渲染。

Google中的印刷版

您可以看到1/2图像现在渲染不正确。而第二张图片是BE＆amp; OE不再可用。

页面还有另外一个问题。

印刷版

你可以看到Header中的差异在真实文档中它是黑色背景标题，在打印版本中它是另外的东西。我从未想过谁的代码。

这些是我遇到的问题。这是这些

的CSS代码

/* the 1/2 image */

.footer-image {
    background-image: url('../Images/snap 2.png');
    opacity: .8;
    width: 60px;
    height: 60px;
    background-size: cover;
    right: 2px;
    bottom: 10px;
}

/* the BE & OE image */

.page-image {
    margin-top: 157px;
    margin-left: 5px;
    z-index: 5;
    background-image: url('../Images/Slide1.png');
    opacity: .25;
    display: block;
    width: 700px;
    height: 700px;
    background-size: cover;
}

标题的代码为

.header-sect h4 {
    color: #fff;
    background: #000;
    max-width: 450px;
    line-height: 20px;
    font-size: 1.45em;
    margin: 0 auto;
    text-decoration: underline;
}