由于 opacity 属性能被子元素继承，使用它设置父元素背景透明度时也会影响子元素．

解决方法：

1> 使用 RGBA

Example

 .classname {

     /* RGBa, 透明度0.6 */

     background: rgba(0, 0, 0, 0.6);

 }

2> 使用 opacity, 设置一个背景DIV，此DIV使用绝对布局

Example

 <div class="demo">

     <div class="demo-bg"></div><!-- 透明背景 -->

     <div class="demo-txt">Content here</div><!-- 不透明文字 -->

 </div>

Demo

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>opacity</title>

 <style>

 *{

     padding: 0;

     margin: 0;

 }

 body{

     padding: 50px;

     background: url(http://static.cnblogs.com/images/logo_small.gif) 0 0 repeat;

 }

 .demo{

     width: 200px;

     height: 200px;

     position: relative;

 }

 .demo-bg{

     position: absolute;

     left: 0;

     top: 0;

     z-index: 0;

     width: 200px;

     height: 200px;

     background-color:#000000;

     filter:Alpha(opacity=50);

     background-color: rgba(0,0,0,0.5);

 }

 .demo-txt{

     position: relative;

     z-index: 1;

     color: #FFFFFF;

 }

 </style>

 </head>

 <body>   

 <div class="demo">

     <div class="demo-bg"></div><!-- 透明背景 -->

     <div class="demo-txt">Content here</div><!-- 不透明文字 -->

 </div>

 </html>

3> 建立一个24位PNG背景图片

不推荐，IE下24位PNG图透明时引起的内存泄漏.

SEE ALSO

CSS实现背景透明完美解决方案
CSS实现背景透明，文字不透明，兼容所有浏览器

CSS 设置背景透明度，不影响子元素的更多相关文章

  1. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  2. css改变背景透明度【转】

    兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...

  3. css改变背景透明度

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:.transparent{filter:alpha(opacity=90); -moz-opacity:0.9; -khtml- ...

  4. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  5. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  6. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  7. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  8. 改变父元素的透明度，不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  9. CSS只改变背景透明度，不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...

随机推荐

  1. 【emWin】例程六：设置颜色

    实验指导书及代码包下载: 链接:http://pan.baidu.com/s/1eSidREy 密码:ru3c 实验现象:

  2. oracle TBL$OR$IDX$PART$NUM BUG案例处理过程

    通过AWR报告发现数据库cpu告警的问题,定位产生问题的sql语句 首先查看SQL的执行计划 ) FROM cmds.psn_cntr_holder a ,cmds.pol_attrib c ,cmd ...

  3. Win7 下安装VirtualBox 没有Ubuntu 64bit 选项问题

    参考: win7安装virtualbox遇到的问题 基于VirtualBox虚拟机安装Ubuntu图文教程 问题 在安装VirtualBox之后,选择虚拟机进行安装的时候发现没有Ubuntu 64bi ...

  4. Autofac

    程序集准备 Assembly: Autofac/Autofac.Integration.Mvc/System.Web.Mvc/System.Web.Helpers/System.Web.WebPage ...

  5. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

  6. 一步一步来做WebQQ机器人-(五)(发送消息||完结)

    × 本篇主要是: 发送QQ消息(to:好友,群),以及对小黄鸡抓包利用它的语言库 本文是WebQQ流程的最后一章 最后一章内容不多但我还是啰嗦,可能对大部分人都已知晓的流程方法我也会介绍一下 前面几个 ...

  7. oauth基本流程和原理

    组装loginurl->去第三方登录验证->回调callbackurl+code(票据)->本地根据code+appid+appkey组装url隐式curl获取用户信息->完成 ...

  8. Source Insight 3.X 插件新loader发布

    [前言] 大约一年多没更新SI插件了,主要原因是我从SI换到了sublime,使用SI少了,插件也就停止更新了.不过看到园子里这么多网友的留言,觉得还是有必要更新一下,算是给还在用SI的朋友们一个交代 ...

  9. SET QUOTED_IDENTIFIER ON和SET ANSI_NULLS ON

    distinct是sqlserver的标识符,如果想以distinct为表时,在QUOTED_IDENTIFIER为off的情况下,是不能创建表名为distinct的表的,因为在QUOTED_IDEN ...

  10. DataTable数据赋值给Model通用方法

    注:该文属本人原创,今后项目中发现该方法存在BUG会实时更新,转载记得附上原文出处,方便大家获得最新代码. 相信大家在做项目中,经常会根据不同的表new各种不同的Model,当需要对Model进行实例 ...