您的位置：首页 > Web前端 > CSS

css图片上漂浮着文字效果

2014-06-23 14:27 615 查看

1.效果：

2.html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> 图片上浮动文字 </TITLE>

<style>

.geren_body_right{float:left; width:454px; margin-left:60px!important; margin-left:30px; padding-top:5px;}

.geren_body_right span{filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background:#ffffff; margin-top:360px; height:25px; position: absolute; width: 454px;}

.geren_body_right font{ margin-top:360px; height:25px; line-height:25px; font-size:12px; font-weight:bold; text-align:center; color:#ff0000; position: absolute; width: 454px;}

</style>

</HEAD>

<BODY>

<div class="geren_body_right">

<span></span><font>想知道我是谁吗？</font>

<img src="niu.jpg" width="454" height="411"/>

</div>

</BODY>

</HTML>

3.相关css样式说明:

-moz-opacity: 在Firefox中设置元素透明度，Firefox3.5以后不再支持-moz-opacity，而改用opacity

语法-moz-opacity: number | inherit ;赋值 0 (或更少) 元素完全透明 (invisible) 0 < number < 1 元素透明 (背景可见) 1 (或更多) 元素完全不透明 (solid)

在IE下用filter:alpha(opacity=20);

IE6并不支持!important规范 ! 上面的代码“margin-left:60px!important; margin-left:30px; ”，非IE6下按margin-left:60px!important显示; ，IE6下按margin-left:30px显示

position:relative相对定位，position:absolute绝对定位，它们之间的区别是absolute可以层叠，relative不可以层叠。

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

标签：

相关文章推荐

新的分享

章节导航