CSS让一行文字显示在全局图片的底部。。

html-css027

CSS让一行文字显示在全局图片的底部。。,第1张

直接上代码：

<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的值就行了。

辛苦码字，如果问题解决了，别忘了给分哦。

建一个div容器，用div包裹img，即可。

<div style="width:100%overflow:hiddenheight:autotext-align:center">

<img src="abc.png" />

</div>

或者将图片当作背景来使用（需要固定容器高度）：

<div style="width:100%overflow:hiddenheight:200pxbackground:url(abc.png) no-repeat center top"></div>

当然，也可以使用Js来处理，不过不建议使用Js作过多网页版式设置。