css怎么将文字叠加在图片上

Posted 2023-04-14

可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个div 里面然后给图片和文字加上定位，然后文字的图层比图片的图层位置高就行了

第一种
<style>
.divwidth: 200px;height: 200px;background: url("图片路径") no-repeat;
</style>

<div class="div">
<p>你的文字内容</p>
</div>

第二种
<style>
.divwidth: 200px;height: 200px;position: relative;z-index: 0
.div imgposition: absolute;top: 0;left: 0;width: 100px;height: 100px;
.div pposition: absolute;top: 0;left: 0;z-index: 10;
</style>

<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div> 参考技术A 你可以把图片作为文字那个块标签的背景图片或者你把图片和文字都放在一个同一个div 里面然后给图片和文字加上定位，然后文字的图层比图片的图层位置高就行了

第一种
<style>
.divwidth: 200px;height: 200px;background: url("图片路径") no-repeat;
</style>

<div class="div">
<p>你的文字内容</p>
</div>

第二种
<style>
.divwidth: 200px;height: 200px;position: relative;z-index: 0
.div imgposition: absolute;top: 0;left: 0;width: 100px;height: 100px;
.div pposition: absolute;top: 0;left: 0;z-index: 10;
</style>

<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>本回答被提问者和网友采纳 参考技术B 给文字加绝对定位：position:absolute; 参考技术C 用用Potoshop试试

html+css如何在图片上添加文字

可以。

以html为例，步骤：

一、在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字。

二、在CSS中对文字图片进行简单样式添加，效果如图所示；大盒子使用描边显示，里面包含了图片和下面的文字。

三、想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对定位。

四、对文字添加了绝对定位后，如图效果，然后就需要对其设置下位置关系了。

五、位置关系通常就是top  bottom left right 上下左右四个方向了，最后完成了。

参考技术A

绝对定位了解一下。

<div class="box">
    <img src="图片路径">
    <p>我是文字我是文字</p>
</div>

.boxposition:relative; width:500px;
.box imgwidth:100%;
.box pposition:absolute;width:300px;height:60px;left:100px;bottom:0px;