css实现图片上漂浮着文字效果

本文介绍了一种在图片上方添加半透明文字的效果实现方法。通过HTML和CSS代码演示了如何定位文字并设置其透明度。特别针对不同浏览器的兼容性问题提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.效果

 

2.相关的html和css代码

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片上浮动文字 </TITLE>
<style>
.geren_body_right{float:left; width:120px; 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:110px; height:25px; position: absolute; width: 120px;}
.geren_body_right font{ margin-top:110px; height:25px; line-height:25px; font-size:12px; font-weight:bold; text-align:center; color:#ff0000; position: absolute; width: 120px;}

</style>

</HEAD>

<BODY>
    <div class="geren_body_right">
        <span></span><font>想知道我是谁吗?</font>
        <img src="tu.bmp" width="120" height="140"/>
    </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不可以层叠。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值