rgba兼容性处理
根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。
实例代码：
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>rgba 兼容性处理</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .parent {
width: 400px;
height: 400px;
margin: 100px;
font-size: 20px;
color: #FF0000;
border: 1px solid red;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head> <body>
<div class="parent">
rgba
</div>
</body> </html>
chrome浏览器效果：
IE8浏览器效果（无背景）：
rgba兼容性处理：
.parent {
width: 400px;
height: 400px;
margin: 100px;
font-size: 20px;
color: #FF0000;
border: 1px solid red;
background: rgba(0, 0, 0, 0.5);
/*下一句关键设置*/
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);
}
设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，但是这个地方不需要渐变，所以两个颜色都设置成了相同的颜色。
这个颜色“#7f000000”是由两部分组成的。
第一部是#号后面的7f 。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：
即：alpha*255得到的值再转换为16进制即可。
第二部分是7f后面的六位 是六进制的颜色值，跟rgb函数中的取值相同，比如rgb(255,255,255)对应#ffffff。
总结：至此完成IE8以及以下IE浏览器RGBA兼容性处理。
rgba兼容性处理的更多相关文章
- 【原】CSS实现背景透明，文字不透明，兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明，文字不透明，兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明，文字不透明(兼容所有浏览器)
我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...
- Matplotlib数据可视化（7）：图片展示与保存
In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as ...
- RGBA颜色与兼容性的半透明背景色
所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Al ...
- CSS3：RGBA的使用方法
1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...
- 从天猫和支付宝身上学习opcity与rgba
不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现 ...
- 兼容性背景颜色半透明CSS代码（不影响内部子元素）
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
- 一行代码解决ie6,7,8,9,10兼容性问题
"浏览器模式"."文档模式"选项的区别如下: 1."浏览器模式"用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给 ...
随机推荐
- Redis 介绍与安装
Redis 是Key-Value 类型的内存数据库,支持多数据结构,性能非常出色,每秒处理十万次读写操作. 整个大致的过程是: 整个数据库加载到内存中,操作之,通过异步定期处理数据库数据的刷新到硬盘 ...
- “权限系统_基于HUI”的简单介绍和交流
昂,最近比较闲,写了个权限系统. 后端框架还是老样子,基于本人自己搭建的后台基础开发框架"Spring_Mvc_EF":前端框架,我挑选了一阵子,最后选用了HUI前端开发框架,因为 ...
- 第七届蓝桥杯javaB组真题解析-凑算式（第三题）
题目 /* 凑算式 B DEF A + --- + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~I代表1~9的数字,不同的字母代表不同的数字. 比 ...
- 5分钟快速入门 - Less
下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点: 简单介绍 Less CSS 是一个使用广泛的 CSS 预处理器. 对 CSS 进行扩展,减少很多 CSS ...
- Sublime Text 3 修改插件安装位置【sublime text、插件路径、Data】
直接切入正题,在享受Sublime 插件给我们带来开发效率的同时,有些插件的文件也是很大的,但是插件默认安装的位置是AppData的目录[C:\Users\用户名\AppData\Roaming\Su ...
- php文件上传分类
<?php/** * 文件上传类 * @author lijiamin * @time 2017-02-17 * @email 1195989301@qq.com */class Upload{ ...
- 用phpcms如何将静态页面制作成企业网站（中）
上篇博客中讲到了该修改网页的中间部分 中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的 里面的内容就可以在后台管理那里添加 再来看代码部分 <div class=&quo ...
- 构建Docker平台【第二篇】安装 Docker
第一步:上传安装包和 docker 镜像 1.安装包: docker-engine-1.12.1-1.el7.centos.x86_64.rpm docker-engine-selinux-1.12. ...
- Java Web(九) 用户管理系统
前面学习了一大堆,什么JSP,Servlet.jstl.el等等等,大多是一些死的东西,只要会其语法,知道怎么用就行了,所以做了一个小小的只有增删改查的小demo,为的就是熟悉这些知识.灵活运用起来. ...
- 淘宝API调用 申请 获取session key
在调用淘宝的API时,我们都会用到appkey,appsecret,appsession. 1.我们申请应用就会有appkey和appsecret了 2.正式环境下获取SessionKey 注意:we ...