通过样式使背景半透明,文字不透明,兼容所有浏览器

admin查看全部>> 05-08

人气 4,847

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

文章目录
[隐藏]

我们在做网页时候会遇到一个情况,就是背景半透明,文字却不需要透明效果,通常情况下,设置了背景透明效果,文字也会透明。那么如何实现背景半透明,文字不透明呢?先看下面代码:

css代码-背景和文字同时透明

html代码

其中css代码中opacity:0.5;只支持火狐不支持ie6/7/8,filter:alpha(opacity=50);则是通过css滤镜来实现背景半透明。这是我们查看实例1。发现背景半透明了,文字也半透明了。我们把代码再进行修改一下。

css代码-背景透明,文字不透明

html代码

其中css代码中filter:alpha(opacity=50);同样只支持ie6/7/8,background:rgba(0,9,153,0.5);是通过css3的写法,固然只支持火狐,所以我们还不得不对IE单独进行处理,那么来看下实例2
从实例中看出,已经达到我们的效果了,其中position:relative;是给IE低版本浏览器看的,通过position:relative;使对象脱离文档流,也就是里面的文字不受外面div的影响,从而达到效果。
最后,你也可以使用半透明图片来解决这个问题,但是与之其来的就是你要解决ie6透明问题,不推荐。

在线预览本地下载网盘下载

标签
相关作品
通过样式使背景半透明,文字不透明,兼容所有浏览器:已吐槽 2 次
  1. 板凳
    气烧石灰窑:

    在看完这帖子以后,我没有立即回复,因为我生怕我庸俗不堪的回复会玷污了这网上少有的帖子。但是我还是回复了,因为觉得如果不能在如此精彩的帖子后面留下自己的网名,那我死也不会瞑目的!

    2014-11-04 下午 11:28 [回复]
  2. 沙发
    回转式烘干机:

    看完楼主的帖子,我的心情竟是久久不能平复,正如老子所云:大音希声,大象希形。

    2014-10-16 下午 5:44 [回复]



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆