<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px
height: 250px
background-color: red
text-align: center
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
<br/>
你啥时候嫁给我,hahahahaahahahahahaah
</div>
</body>
</html>
————————————————
这样就会能够将文字放在图片的正下方，得到以下图片：
文字位于正右边的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 400px
height: 250px
background-color: red
}
.d2{
vertical-align: middle
}
</style>
</head>
<body>
<div>
<img width="200px" height="150px" src="dddd.png" />
你啥时候嫁给我
</div>
</body>
</html>
1、打开Dreamweaver创建css页面。
2、输入以下代码，如图。
3、切换至设计模式添加图片为背景，输入文字看最终效果，如图。
直接上代码：<td align="center">
<div style="position:relativeheight:450pxwidth:300px">
<a href="#" target="_blank"><img src="图片1.jpg" style="border:0height:450pxwidth:300pxfloat:nonemargin:0px"/></a>
<div style="opacity:0.6filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60)position:absolutewidth:300pxheight:50pxline-height:50pxz-indent:2left:0bottom:4background:#000color:#FFF">
文字
</div>
</div>
</td>
<td align="center">
<div style="position:relativeheight:450pxwidth:300px">
<a href="#" target="_blank"><img src="图片2.jpg" style="border:0height:450pxwidth:300pxfloat:nonemargin:0px"/></a>
<div style="opacity:0.6filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60)position:absolutewidth:300pxheight:50pxline-height:50pxz-indent:2left:0bottom:4background:#000color:#FFF">
文字
</div>
</div>
</td>
要是想修改文字和底部的距离 修改bottom的值就行了。
辛苦码字，如果问题解决了，别忘了给分哦。
