当前位置:首页 > DIV+CSS实例 > 正文

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

作者:××× 来源:aa25.cn 【 】 浏览: 添加日期:2008-12-16 我要评论(5)     

此例和上例有些共同点,同是应用相对定位和绝对定位的方法。本例使用了cite标签定义说明文字的方法。通过这几个例子,希望能让你掌握css对图片的控制、相对定位和绝对定位、css背景的应用和标签的灵活运行等。

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

 

<div class="img-demo"> <img src="uploadfile/sample.jpg" alt="" /> <cite>Today is a greet day! 2008-12-16</cite> </div>

实现方法:通过相对定位和绝对定位来定位说明文字的位置。本例中一个难点就是层透明度问题,大家可以看到cite层的透明使用了-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; 这三个样式来实现,这是为了兼容各个浏览器的。

下面看演示:


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: 背景半透明 relative position absolute

更多评论(5)..会员评论

JFMel(124.117.*.*) 发表于:2013-07-26 14:07:41
我的dreamweaver没有filter属性啊??怎么解决
管理员回复:版本太低 只能手打
JFMel(124.117.*.*) 发表于:2013-07-26 14:06:36
为什么我的dreamweaver 没有filter属性啊??我是adobe dreamweaver cs5
vcltcheng(115.195.*.*) 发表于:2011-02-22 21:03:08
怎么没图片~是红X
管理员回复:图片找不到了
牙嘿嘿的猪(221.218.*.*) 发表于:2009-09-16 16:42:21
FF,opera,IE7,IE8,苹果,谷歌浏览器,都可以正常显示,但唯一不足的是IE6下半透明的那个底变成黑色的了。。。
管理员回复:应该不会呀,我的IE6下显示就正常的
Guest(219.142.*.*) 发表于:2008-12-24 12:09:04
ff 不支持
管理员回复:ff支持呀,此个例子在ff下显示正常。只不过此运行代码功能在ff下不能用

出差旅游免费预订酒店

【视频教程】新手常见问题