本文为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. 促双碳|AIRIOT智慧能源管理解决方案

      随着"双碳"政策和落地的推进,各行业企业围绕实现碳达峰和碳中和为目标,逐步开展智能化能源管理工作,通过能源数据统计.分析.核算.监测.能耗设备管理.碳资产管理等多种手段,对能源 ...

  2. GROUP BY clause and contains nonaggregated 报错处理

    1055 - Expression #16 of SELECT list is not in GROUP BY clause and contains nonaggregated column 报错处 ...

  3. Flask简单部署至kubernetes

    安装Kubernetes.Docker Kubernetes.Docker安装教程 项目地址 Github Flask flask run.py from flask import Flask imp ...

  4. Java 对象的揭秘

    前言 作为一个 Java 程序员,我们在开发者最多的操作要属创建对象了.那么你了解对象多少?它是如何创建?如何存储布局以及如何使用的?本文将对 Java 对象进行揭秘,以及讲解如何使用 JOL 查看对 ...

  5. vim快捷键之复制粘贴

    yy: 复制光标所在行 p: 将复制的内容粘贴到光标所在行的下一行 P: 将复制的内容粘贴到光标所在行的上一行

  6. VMware Workstation安装Ubuntu窗口太小的解决方式

    1.选择菜单中的:虚拟机--------安装VMware-Tools 2.点击DVD图标 3.将压缩文件复制到桌面 4.解压压缩文件 5.进入解压后的目录,执行命令: sudo perl vmware ...

  7. Linux系统编程（十）线程池

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <pthread.h& ...

  8. C# wpf 实现截屏框实时截屏功能

    wpf截屏系列第一章 使用GDI+实现截屏第二章 使用DockPanel制作截屏框第三章 实现截屏框实时截屏(本章)第四章 使用ffmpeg命令行实现录屏 文章目录wpf截屏系列前言一.实现步骤1.获 ...

  9. 一个 .NET 开源的地图组件库 - Mapsui

    前言 今天大姚给大家分享一个.NET开源(MIT License).免费.同时支持多平台框架(MAUI.WPF.Avalonia.Uno.Blazor.WinUI.Eto..NET Android 和 ...

  10. kubernetes ingress网站发布

    ingress网站发布 单域名 # 1.创建nginx pod 名称: nginx-nodeport.yaml cat nginx-nodeport.yaml apiVersion: v1 kind: ...