Html 如何将文字放置在身份证预格式化区域的图像上？_Html_Css

Html 如何将文字放置在身份证预格式化区域的图像上？

html css

Html 如何将文字放置在身份证预格式化区域的图像上？,html,css,Html,Css,我正在做一个id卡项目，我有一个数据到MYSQL数据库和一个PHP页面中的id卡空白图像，大小固定现在我需要将MYSQL数据库数据放入图像中，最后我需要获得包含所有有效数据的id卡我试过： <body> <div class="image_holder"> <img src="bg2.jpg" /> <div class="overlay"> </div> </div> <div>NHS

我正在做一个id卡项目，我有一个数据到MYSQL数据库和一个PHP页面中的id卡空白图像，大小固定

现在我需要将MYSQL数据库数据放入图像中，最后我需要获得包含所有有效数据的id卡

我试过：

<body>
<div class="image_holder">
    <img src="bg2.jpg" /> 
    <div class="overlay"> </div>
</div>

<div>NHS SUB</div>   
</body>

像这样的

.包装纸{ 高度：自动；高度：280px；显示：内联块； } .图像固定器{ 位置：相对位置；浮动：左；右边距：10px；宽度：180px；背景色：ccecec；显示：块；最小高度：100%； } .覆盖{ 位置：绝对位置；排名：0；文本对齐：居中； /*背景色：rgba34,70,118,0.7*/ 宽度：100%；身高：100%； } p{ 位置：绝对位置；底部：0；保证金：0自动0；填充：2px0；显示：内联块；背景色：FE9D86；宽度：100%；文本对齐：居中；颜色：000； } img{ 显示：块；保证金：0自动；位置：绝对位置；左：0；右：0；顶部：90px；边界半径：8px； } 内容

内容

我不太明白你的问题。您的overlay类实际上允许您在图像上放置文本，但为什么它是空的？您是否希望将NHS SUB放置在您的图像上？文本放置在图像上，但不在我希望放置的固定区域。例如，我需要将姓名数据放在姓名列表旁边，将名称数据放在设计区域旁边请检查图像我正在获取显示的文本，但我需要将文本放置在需要将数据放在id卡中的区域，如name=name address=address和DOb=20.09.1979等在这张卡片中好的，当我回答时，样本图片不在那里。将很快更新我的答案。@rado我已更新我的答案。你是不是想达到这样的目标？

.image_holder {
    position:relative;
    float:left;
}

.overlay {
    position:absolute;
    top:0;
    background-color:rgba(34,70,118,0.7);
    width:100%;
    height:100%;
}