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

最新推荐文章于 2022-04-02 16:44:50 发布

sjf0115

最新推荐文章于 2022-04-02 16:44:50 发布

阅读量6.8k

点赞数

文章标签： html filter class div

本文链接：https://blog.csdn.net/sjf0115/article/details/7583943

版权

Div+CSS+JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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