<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>将图片的说明文字显示在图片之上且背景半透明效果</title>
<style type="text/css">
body {
text-align: center;
font-family:Verdana;
font-size:14px;
}
.img-demo {
position: relative;
display: block;
height:600px;
width: 435px;
margin: 0 auto;
}
.img-demo cite {
background: #00FFFF;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50; color: #FF3333;
position: absolute;
bottom: 0px;
left: 0px;
width: 435px;
padding: 10px 0;
border-top: 1px solid #999;
}
</style>
</head>
<body>
<div class="img-demo"> <img src="image/boy.jpg" alt="" /> <cite>2012-5-19诺伊尔</cite> </div>
</body>
</html>
