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

html-css07

css怎么将文字叠加在图片上,第1张

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

第一种

<style>

.div{width: 200pxheight: 200pxbackground: url("图片路径") no-repeat}

</style>

<div class="div">

<p>你的文字内容</p>

</div>

第二种

<style>

.div{width: 200pxheight: 200pxposition: relativez-index: 0}

.div img{position: absolutetop: 0left: 0width: 100pxheight: 100px}

.div p{position: absolutetop: 0left: 0z-index: 10}

</style>

<div class="div">

<img src="图片路径" alt="#">

<p>你的文字内容</p>

</div>

<div>

<p>欢迎来到计算机科学</p>

<p>欢迎来到科学院</p>

</div>

css:

div{

position: relative

}

div p{

position: absolute

}

div p:first-child{

display: none

}

写第二列的宽度等于table的宽度减去第一列的宽度，需要用js控制获得两个元素的宽，相减后的结果是第二列元素宽度属性的值。但是这样做很麻烦。

建议你把图片和文字分别放在两个span标签里，这样就可以不用定义宽度了