使用 CSS 在图像上重叠文本——在屏幕上有效，但在打印中无效
Posted
技术标签:
【中文标题】使用 CSS 在图像上重叠文本——在屏幕上有效，但在打印中无效【英文标题】：Using CSS to Overlap Text on Image -- Works on Screen, but not in Print 【发布时间】：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" />
<div class="learner-name">@@person.first_name@@ @@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" />
</div>
</body>
</html>
【问题讨论】：
在生成打印预览时，您的 HTML 可能会变回内联元素。是否必须直接从浏览器打印？可以屏幕抓取或将页面保存为图像并通过 adobe reader 或类似工具打印吗？ @paul-schultz 这对我来说很好用，但是这可能会推广到成百上千的人，所以要求他们这样做是不切实际的。但我被诱惑了，相信我。 【参考方案1】：您可以尝试在媒体查询中使用 print 来设置页面的打印版本的样式。 https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Description
@media screen, print
【讨论】：
谢谢你——我知道@media 打印选项，但不知道如何让它正确呈现。当我打印时，所有设置元素绝对位置的尝试似乎都被忽略了。您是否有以这种方式重叠打印项目的具体经验？以上是关于使用 CSS 在图像上重叠文本——在屏幕上有效，但在打印中无效的主要内容，如果未能解决你的问题，请参考以下文章
CSS Sprites 在图像上显示损坏的图像图标，但悬停仍然有效
将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)