您的位置：首页 > 其它

将图片的说明文字显示在图片之上且背景半透明效果

2012-05-19 23:39 344 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航