最新消息:2014,为梦想加油,专注于前端开发!

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

未分类 admin 5002浏览 2评论
文章目录
[隐藏]

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

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透明问题,不推荐。

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

转载请注明:专注于web前端开发 » 通过样式使背景半透明,文字不透明,兼容所有浏览器

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

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

    气烧石灰窑2014-11-04 23:28 回复
  2. 看完楼主的帖子,我的心情竟是久久不能平复,正如老子所云:大音希声,大象希形。

    回转式烘干机2014-10-16 17:44 回复