用CSS给图片加说明文字并不困难，这里我们用一种更灵活的方法来给网页中的图片加上说明文字，这里要使用CSS中 绝对定位和设置透明度方法来实现。

CSS代码：

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

HTML代码：

<div class="img-desc">
	<img src="http://www.goodtext.org/img/602x404.jpg" alt="www.

goodtext.org" />

	<cite>www.goodtext.org - 602x404.jpg</cite>
</div>

Tags：CSS图片添加说明文字实例，CSS实例