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

html-css05

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>

使用字与字的间距可设置letter-spacing属性实现，例如： 1、p{letter-spacing:15px}即表示

这是一段文字

标签里的文字间距为15px。 2、另外，该属性允许使用负值，这会让字母之间挤得更紧，比如p{letter-spacing:-2px} 3、所有的浏览器都支持letter-spacing属性。