本文为Echoyya、所创，转载请带上原文链接，感谢 https://www.cnblogs.com/echoyya/p/14236242.html

通常的做法

  • 目前大多数浏览器都支持 CSS3，只需将背景色设为类似于rgba(0, 0, 0, 0.5) 这样的rgba 颜色即可：前三个值分别表示红绿蓝(0 - 255)。
  • 第四个值是透明值，取值 0 完全透明，取值 1 完全不透明

Demo 在整个页面上方覆盖一个半透明的黑色蒙版层。

<style>

  #mask {

    position: fixed;

    top: 0px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    background: rgba(0, 0, 0, .5);

  }

</style>

<body>

  <h1>Hello World!!</h1>

  <div id="mask" />

</body>

兼容IE8及以下版本浏览器

  • 对于低版本的浏览器，上面的写法完全没有效果。想要兼容 可以借助 IE 滤镜来实现。
  • 可以在上面的样式里增加 filter 相关代码,#88000000 说明：
    • 前两位是十六进制透明值，00 是完全透明，FF 是完全不透明。88对应差不多0.53左右
    • 后六位是十六进制颜色值。
  • 对应关系表
rgba 透明值 IEfilter 值
0.1 19
0.2 33
0.3 4C
0.4 66
0.5 7F
0.6 99
0.7 B2
0.8 C8
0.9 E5 
#mask {

  position: fixed;

  top: 0px;

  left: 0px;

  right: 0px;

  bottom: 0px;

  background: rgba(0, 0, 0, .5);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);

}

再次使用 IE8 打开页面，可以发现透明图层正常显示了

注：IE8以下显示正常 ( filter 生效 )，IE10-IE11 显示正常 ( rgba 生效 )，当IE9时，二者同时生效，那么此时，元素的不透明度值会变高，当兼容性要求较高时，还需要单独处理一下。效果对比图如下：

背景色透明度兼容IE8的写法的更多相关文章

  1. backgroud背景色样式兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1);但是要兼容到i ...

  2. CSS3背景色透明(兼容IE8)

    标准浏览器通过rgba()实现背景色透明;IE8以下浏览器通过特有滤镜实现背景色透明. 代码如下: 1 /* IE8 */ 2 filter:progid:DXImageTransform.Micro ...

  3. 兼容ie8 rgba()写法

    background: rgba(255,255,255,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1 ...

  4. jQuery validate兼容IE8写法

    最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...

  5. css样式设置图片半透明度，兼容IE8，火狐

    关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...

  6. 兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。

    因为ie8一下不兼容                 document.getElementsByClassName()                 功能:通过class的名字获取符合条件的元素 ...

  7. 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面

    尽管说IE6除了苛刻要求的一部分,我们一直没能考虑,但WIN7内置的浏览器IE8还需要支持. 在本文中,基本这种方法的优点,我个人认为,这是准备少.我们不需要在网上找了很多照片,使材料,你只要准备好了 ...

  8. HTML5 声明兼容IE的写法(转载)

    HTML5 声明兼容IE的写法(转载)   1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <!--[if IE]> <meta http-eq ...

  9. 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  10. 兼容ie8 rgba()用法 滤镜filter的用法

    原文  http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...

随机推荐

  1. nginx启动流程

    nginx启动流程 1. 根据命令行决定配置文件路径 2. 如果处于升级中则监听环境变量里传递的监听句柄 3. 调用所有核心模块的create_conf方法生成存放配置项的结构体 4. 针对所有核心模 ...

  2. docker ——网络配置和管理

    docker网络基础 了解docker网络 两种docker网络 单主机与多主机的docker网络 网络驱动 网络驱动 介绍 bridge 桥接网络,这是默认的网络驱动程序 host 主机网络 ove ...

  3. 快速生成树协议（RSTP）基本知识及实验（使用eNSP）

    关于生成树协议的知识可参考我的另一个博客:https://www.cnblogs.com/mrlayfolk/p/12242627.html 这篇博文主要介绍快速生成树协议(RSTP)的基本知识.-- ...

  4. .NET 8 IApplicationBuilder详解

    在上节中我们已经得知 WebApplication 实现了 IApplicationBuilder,我们浅谈了其pipe特质和构建方法,本节中将深入了解 ApplicationBuilder 以窥探 ...

  5. 剑指Offer-52.正则表达式匹配(C++/Java)

    题目: 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个模式. ...

  6. 刀剑英雄 刀剑Online 双开 多开 窗口在后台 画面不动

    刀剑英雄 刀剑Online 双开 多开 窗口在后台 画面不动 解决方法: 进游戏前,在游戏设置中,选择"后台渲染",然后再进游戏.

  7. 《Android开发卷——自定义日期选择器（一）》

    (小米手机) (中兴手机) 在实际开发中,Google官方提供的时间选择器API已经不能满足于我们的需要了,所以很多公司都是采用自定义的形式来实现日期选择器. 这个例子很简单,定义三个NumberPi ...

  8. Spring Boot 使用 拦截器 实现 token 验证

    Spring Boot 使用 拦截器 实现 token 验证 整体思路:1.写一个工具类封装生成.校验和解析 token 的方法:2.在注册和登录时生成 token ,生成的 token 存入 red ...

  9. 【已结束】阿珏Blog三周年特别纪念活动

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` [已结束]阿珏Blog三周年特别纪念活动 日期:2019- ...

  10. parsel的使用

    介绍 parsel这个库可以解析HTML和XML,并支持使用XPath和CSS选择器对内容进行提取和修改,同时还融合了正则表达式的提取功能.parsel灵活强大,同时也是Python最流行的爬虫框架的 ...