要在一个页面中设置一个半透明的白色div。这个貌似不是难题,只需要给这个div设置如下的属性即可:

background: rgba(255,255,255,0.1);

但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。

rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持的rgba的,ie8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。

所以在ie8中设置半透明就要费点脑子了。从大神那里得知可以使用ie的filter来解决这个问题,css代码如下:

	background: rgba(255,255,255,0.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

大家注意,这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:

第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。

到这里,rgba的用法就可以兼容IE8了。

filter滤镜兼容ie的rgba属性的更多相关文章

  1. 20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)

    今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...

  2. filter(滤镜) 属性 内部资料 请勿转载 谢谢合作

    Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...

  3. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  4. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  5. 使用IE滤镜实现css3中rgba让背景色透明的效果

    让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...

  6. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

  7. filter滤镜的使用

    刚开始学css,开始遇到filter不懂什么意思后来到网上查了,觉得解释的很全面,就把它抠下来,以便自己经常来看看. CSS滤镜的使用方法:filter:filtername(parameters) ...

  8. CSS3 filter(滤镜)

    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...

  9. css3 filter(滤镜)属性汇总与使用介绍,来源W3C

    实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: g ...

随机推荐

  1. 防止SQL注入的登录页面

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  2. 写的一个轻量级javascript框架的设计模式

    公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架.谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可 ...

  3. 工作中一些常用的linux命令

    问题一: 绝对路径用什么符号表示?当前目录.上层目录用什么表示?主目录用什么表示? 切换目录用什么命令? 答案:绝对路径:如/etc/init.d当前目录和上层目录:./  ../主目录:~/切换目录 ...

  4. Paper代写:别让段落结尾拉低你的分数

    为了达到paper写作格式和字数要求,学生往往会在段末做一件事:总结.都不算是一个很长的段落.本来就写不了多少论证的内容,我们还强制加一个总结句,不仅占用了我们论证的篇幅,而且显得多余(段首的主题句已 ...

  5. Ubuntu系统配置Zabbix前端及中文乱码解决方案

    Ubuntu系统配置Zabbix前端及中文乱码解决方案  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装zabbix 博主推荐阅读: https://www.cnblogs ...

  6. Readiness 探测【转】

    除了 Liveness 探测,Kubernetes Health Check 机制还包括 Readiness 探测. 用户通过 Liveness 探测可以告诉 Kubernetes 什么时候通过重启容 ...

  7. 新闻网大数据实时分析可视化系统项目——21、大数据Web可视化分析系统开发

    1.基于业务需求的WEB系统设计 2.下载Tomcat并创建Web工程并配置相关服务 下载tomcat,解压并启动tomcat服务. 1)新建web app项目 创建好之后的效果 2)对tomcat进 ...

  8. other#nginx配置

    #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...

  9. LabVIEW面向对象的ActorFramework(2)

    二.为什么要学习面向编程? 面向对象编程,如果将上文推荐的两本书读完后,基本上也就有了答案.从自我产品开发的经验中,理解为可以迅速解决中大型程序需求变化时,在不影响其他程序功能的情况下,能够实现新增功 ...

  10. CSS样式表——格式与选择器

    1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type= ...