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

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

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

图像要么没有显示在页面上，要么……有点凌乱。看一看,

正确的标记呈现

谷歌的印刷版

可以看到1/2图像现在渲染不正确。第二个图像BE&OE不再可用

这个页面还有一个问题

印刷版是

您可以在标题中看到差异，在真实文档中，它是黑色背景标题，在打印版本中，它是其他内容。我从没想到过他的密码

这些就是我面临的问题。下面是这些的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;
}

---

你试过CSS@media types吗？@Krumia，我确实试过，