Question

怎么在图片上面或者下面添加一段文字例如标题

<a href="超链接"><img src="连接" /></a> 在红色位置显示各个图片的标题 不改变图片位置 怎么写代码 求大神指点

Answer 1

给你一个大题示意代码：
<div class="img_box">
  <div class="img"><a href="超链接"><img src="连接" /></a><div class="title"></div> </div>
  <div class="img"><a href="超链接"><img src="连接" /></a><div class="title"></div> </div>
  <div class="img"><a href="超链接"><img src="连接" /></a><div class="title"></div></div>
  <div class="img"><a href="超链接"><img src="连接" /></a><div class="title"></div></div>
</div>
CSS代码：
.img_box{width:500px;height:400px;}
.img{width:100px;height:150px;float:left;position:relative;}
.title{width:100px;height:20px;position:absolute;top:-20px;left:0px;//如果想在下面就将top:-20px修改为bottom:-20px;}

追问

按照你的代码我测试了下 图片布局都变了 其他地方的CSS布局也变了

追答

给你的是示意代码，你要理解其中的道理。你想讲标题定位在图片上面，那img外层必须要有一个div，然后里面放一个然后相对于img的div进行定位。我写的代码只是针对于标题相对于图片定位，而不是图片如何排列的问题。至于图片排泄就得设置margin了

Answer 2

给图片父节点设置position:relative;然后给文字的div设置position:absolute;根据top:和left:值调整位置

Answer 3

你可以新建一个层,加上position:fixed;,然后用magin调位置

追问

额 完整的代码怎么写- -

Answer 4

每个图片设置成a的一个背景：background：url() no-repeat;之后通过控制CSS样式来固定文字的位置。如果听不懂，请继续问，可以在线回答。

追问

详细的代码怎么写，能不能给我个样本