为图片添加文字说明

常常遇到要做一些效果.就是在图片上添加这个图片的一些说明性的文字,这用PS处理还是很容易解决的,但如果图片一多,就会多了处理的手续,比起用DW来实现,那可是要慢多了,现整理了一个,拿出这个效果来和大伙讨论一下,如果有更好的解决方法,还望各位大虾不啬赐教.
首先:写好样式;如下:
<style type="text/css">
body {
margin: 0 auto;
text-align: center;
padding: 0 0 50px;
font: 12px Arial, Helvetica, sans-serif normal;
}
.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
margin: 0 auto;
}
.img-desc cite {
background: #111;
-moz-opacity:.55;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}
</style>
其次,添加图片层,处理出在图片上显示说明性文字的效果.代码如下:
<div>
<img src="图片地址" alt="" />
<cite>图片的说明性文字,可以是标题.</cite>
</div>
最终的效果如下图:
效果图

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP