首先要说明的是背景是内容的祖先元素。如果是兄弟节点那就没有必要记录这篇文章了。

　　记录一下，知其然也知其所以然。

IE8-特点：

　　1.不支持"opcity:0.5;"这种写法，只支持"filter:alpha(opacity=50)"。

　　2.如果背景元素拥有css属性设置了z-index的值（除默认值auto外),则内容会随着背景元素一起半透明

　　3.如果背景元素的内容元素本身或其祖先节点（这些祖先节点是背景元素的后代节点）没有设置css定位属性position:relative/absolute/fixed。则内容也会随着背景元素一起半透明。

　　4.支持"background：rgb(0,0,0)"设置背景颜色，但是不支持“background：rgba(0,0,0,0.5)”这种设置背景颜色的同事设置半透明的方式。

　　

IE9+、chrome、Firefox特点：

　　1.支持"opacity:0.5",但是内容会随背景一起半透明

　　1.支持“background：rgba(0,0,0,0.5)”这种设置背景颜色的同事设置背景半透明但内容不透明的方式。

　　2.如果同事使用opacity=0.5和rgba不透明度为0.5，那么效果是在元素为opacity所设置的不透明度的情况下背景再次按rgba的方式半透明。最终背景的半透明度为opacity*rgba=0.5*0.5=0.25。

　　IE9+还有一个特点就是同时支持opcity:0.5和"filter:alpha(opacity=50)"这种方式。所以rgba和filter一起用会出现第三项的情况。

　　所以综合上述的浏览器特点，兼容所有浏览器的方案是背景元素设置样式为

    /*不能设置z-index,根据情况设置需要的background的颜色,chrome/firefox中第一句起作用；IE中后两句起作用*/

    .background{

        background: rgba(0,0,0,0.5);/*firefox、chrome*/

        background: #000\9;/*IE*/

        filter: alpha(opacity=50);/*IE*/

    }

　　代码解读为在Firefox、chrome下后两句不会被识别，所以使用rgba做背景半透明内容不透明；IE下第二句的background会覆盖第一句话，所以最终结果是后两句起到作用。

　　

　　内容元素的样式为

/*可以设置元素或其祖先节点为定位样式relative/absolute/fixed*/

.content{

    position:relative;

}

　　完整实例

<!DOCTYPE html>

<html lang="ch-cn">

  <head>

　　<meta charset="utf-8">

    <style type="text/css">

    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{

      margin: 0;

      padding:0;

    }

    *{

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      box-sizing: border-box;

    }

    /*不能设置z-index,根据情况设置需要的background的颜色,chrome/firefox中第一句起作用；IE中后两句起作用*/

    .background{

        background: rgba(0,0,0,0.5);/*firefox、chrome*/

        background: #000\9;/*IE*/

        filter: alpha(opacity=50);/*IE*/

    }

    /*可以设置元素或其祖先节点为定位样式relative/absolute/fixed*/

    .content{

        position:relative;

    }

    </style>

  </head>

  <body>

    <div style="width:50px;height:50px;border:1px solid;background: red;"></div>

    <div class="background" style="width: 200px;height: 200px;">

        <div class="content" style="width: 50px;height:50px;background: red;"></div>

    </div>

</html>

　　效果图如下

　　

　　如果觉得本文不错，请点击右下方【推荐】！

兼容IE、Firefox的背景半透明内容不透明设置的更多相关文章

  1. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. div背景透明内容不透明与0.5PX边框兼容设置

    1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解 ...

  4. 【27前端】背景半透明rgba LESS实践

    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...

  5. css 背景透明文字(内容)不透明三种实现方法

    好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

  6. css设置div等标签背景半透明

    三种方式: 1. background-color: transparent; 直接设置背景为透明 2.这种是子元素也会跟着变成半透明 /* 背景半透明,1为不透明 */ opacity: 0.5; ...

  7. Css:背景色透明，内容不透明之终极方法！兼容所有浏览器

    转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...

  8. Android PopupWindow 弹窗背景半透明，设置最大高度

    首先讲一个网上的方法: popupwindow弹出后,屏幕背景变成半透明这个效果很普通.实现的方法也很多.我使用的可能是最简单的一种,就是设置一下getWindows的透明度. /** * 设置添加屏 ...

  9. DIV背景半透明文字不半透明的样式

    DIV背景半透明,DIV中的字不半透明 代码如下:<body bgcolor="#336699"> <div style="filter:alpha(o ...

随机推荐

  1. 使用 CXF 做 webservice 简单例子

    Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这样的服务部署在 Tomcat 和基于 Spring 的轻量 ...

  2. mongoDB研究笔记：复制集故障转移机制

    上面的介绍的数据同步(http://www.cnblogs.com/guoyuanwei/p/3293668.html)相当于传统数据库中的备份策略,mongoDB在此基础还有自动故障转移的功能.在复 ...

  3. FastUI快速界面原型制作工具

    FastUI是一款快速制作应用程序界面原型的小工具,它之所以快,是因为它体积小巧.功能简洁实用. 在真正的应用程序(包括winform.手机app.网站等)开始编码之前,一般要先设计出原型,以便确认需 ...

  4. [备忘]删除SQL Server中无登录名的用户

    这个问题通常会在还原虚拟主机的备份SQL文件后发生,原先在虚拟主机上的用户会被还原到本地,但是本地没有权限对其进行操作. SELECT N'ALTER AUTHORIZATION ON SCHEMA: ...

  5. Java和eclipxe的安装以及第一个程序

    首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 注意事项:安装 ...

  6. Atitit j2ee5 jee5 j2ee6 j2ee7 jee6 jee7 新特性

    Atitit j2ee5 jee5 j2ee6 j2ee7 jee6 jee7 新特性 Keyword Java ee5 ,Java ee6,Java ee7  j2ee5 jee5 j2ee6 j2 ...

  7. Ecshop ：后台添加新功能 菜单及 管理权限 配置

    需求:在<商品管理>下增加一项[商品推广管理]功能 一. 添加菜单项 打开 /admin/includes/inc_menu.php 文件(后台框架左边菜单),在最后添加一行如下: $mo ...

  8. draggable属性设置元素是否可拖动。

    设置标签属性draggable="true"将一个标签内的元素拖动到另外一个标签进行显示: <!DOCTYPE HTML> <html> <head& ...

  9. WPF入门教程系列十——布局之Border与ViewBox（五）

    九. Border Border 是一个装饰的控件,此控件绘制边框及背景,在 Border 中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel 控件放置在父 Border 中.然后可 ...

  10. SQL SERVER 查询性能优化——分析事务与锁（五）

    SQL SERVER 查询性能优化——分析事务与锁(一) SQL SERVER 查询性能优化——分析事务与锁(二) SQL SERVER 查询性能优化——分析事务与锁(三) 上接SQL SERVER ...