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

发布网友 发布时间：2022-03-09 02:32

我来回答

共4个回答

热心网友 时间：2022-03-09 04:01

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

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

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

第二种
<style>
.div{width: 200px;height: 200px;position: relative;z-index: 0}
.div img{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.div p{position: absolute;top: 0;left: 0;z-index: 10;}
</style>

<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>

热心网友 时间：2022-03-09 05:19

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

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

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

第二种
<style>
.div{width: 200px;height: 200px;position: relative;z-index: 0}
.div img{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.div p{position: absolute;top: 0;left: 0;z-index: 10;}
</style>

<div class="div">
<img src="图片路径" alt="#">
<p>你的文字内容</p>
</div>

热心网友 时间：2022-03-09 06:54

给文字加绝对定位：position:absolute;

热心网友 时间：2022-03-09 08:45

用用Potoshop试试