本文介绍了一种使用CSS样式实现图片上的文字说明具备半透明背景的方法，通过简单的HTML结构和CSS属性设置，可以在不影响用户体验的前提下，为图片添加美观且易读的文字说明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>将图片的说明显示在图片之上且背景半透明效果</title>
<style type="text/css">
body { text-align: center; font-family:Verdana; font-size:14px; }
.img-demo { position: relative; display: block; height:500px; width: 335px; margin: 0 auto; }
.img-demo cite { background: #333; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; color: #fff; position: absolute; bottom: 0; left: 0; width: 335px; padding: 10px 0; border-top: 1px solid #999; }
</style>
</head>
<body>
<h2>将图片的说明显示在图片之上且背景半透明效果</h2>
<div class="img-demo"> <img src="uploadfile/sample.jpg" alt="" /> <cite>Today is a greet day! 2008-12-16</cite> </div>
<h3>标准之路——<a href="http://www.aa25.cn/">www.aa25.cn</a> 转载请注明出处</h3>
</body>
</html>
玩转CSS+DIV之图片居中
最新推荐文章于 2022-08-05 13:35:05 发布
扫一扫
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
