需求:
1、证书内容动态填充;
2、证书背景图不要求打印,只为展示作用;
3、打印内容兼容屏幕分辨率;
实现:
<!-- 外层div宽度为背景图片宽 -->
<div style="position: relative;width: 1397px;margin: 0 auto;">
<div id="permitImg" style="position: absolute;">
<!-- 背景图片 -->
<img src="demo.jpg">
</div>
<div class="infos" style="position: absolute;">
<!-- 展示内容 -->
<span style="top: 77px;left: 151px;">证书内容</span>
</div>
</div>
小知识点:
1、span定宽,但文字不换行,设置word-wrap: break-word;
2、调节span填充文字行间距,设置line-height属性;
3、span定宽定高,超出文本框的内容不展示,设置overflow: hidden;