需求:
1、证书内容动态填充;
2、证书背景图不要求打印,只为展示作用;
3、打印内容兼容屏幕分辨率;
实现:
<!-- 外层div宽度为背景图片宽 --> <div style="position: relative; 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;