使用 CSS 在图像上重叠文本——在屏幕上有效，但在打印中无效答案

【问题标题】：Using CSS to Overlap Text on Image -- Works on Screen, but not in Print使用 CSS 在图像上重叠文本——在屏幕上有效，但在打印中无效
【发布时间】：2021-01-20 20:06:34
【问题描述】：

我首先要说我不是 HTML 开发人员，但我偶尔会尝试创建一些东西。希望这个问题的答案比我想象的要容易。

我使用 CSS 创建了一个与图像重叠的文本框。这在屏幕上完全按照需要显示，但是当我尝试打印屏幕时，它会弹出文本 div 并改为在线打印它们。我玩过@screen 和@media，但我似乎无法破解这个。

这是我现在看到的一个例子：

这是我正在使用的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            @media screen {
                .learner-name {  
                    position: absolute;
                    color: black;
                    white-space: nowrap;
                    font-size: 10px;
                    width: 250px;
                    text-align: left;
                    top: 91px;
                    left: 168px;
                    width: 250px;
                    height: 20px;
                    }

                .date-completed {  
                    position: absolute;  
                    color: black;  
                    white-space: nowrap;  
                    font-size: 10px;  width: 250px;  
                    text-align: left;  
                    top: 111px;  
                    left: 168px;  
                    width: 250px;  
                    height: 20px;
                    }

                .container { 
                    position: relative; 
                    width:350px;
                    }
                } 
        </style>
    </head>
    <body>
        <div class="container">
            <img style="width: 350px;" src="https://adtsb.sabacloud.com/production/NA6T1SNB099/CertificateTemplates/crttp000000000002520/local000000000000001/images/cert-side-1.PNG?v=546268" alt="Side 1" />
            <div class="learner-name">@@person.first_name@@&#160;@@person.last_name@@</div>
            <div class="date-completed">@@offering.date_marked_complete@@</div>
            <img style="width: 350px;" src="https://adtsb.sabacloud.com/production/NA6T1SNB099/CertificateTemplates/crttp000000000002520/local000000000000001/images/cert-side-2.PNG?v=248336" alt="Side 2" />
        </div>
    </body>
</html>

【问题讨论】：

在生成打印预览时，您的 HTML 可能会变回内联元素。是否必须直接从浏览器打印？可以屏幕抓取或将页面保存为图像并通过 adobe reader 或类似工具打印吗？
@paul-schultz 这对我来说很好用，但是这可能会推广到成百上千的人，所以要求他们这样做是不切实际的。但我被诱惑了，相信我。

标签： html css printing media-queries screen

【解决方案1】：

您可以尝试在媒体查询中使用 print 来设置页面的打印版本的样式。 https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Description

@media screen, print {

【讨论】：

谢谢你——我知道@media 打印选项，但不知道如何让它正确呈现。当我打印时，所有设置元素绝对位置的尝试似乎都被忽略了。您是否有以这种方式重叠打印项目的具体经验？