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针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给 ...
随机推荐
- python之FTP程序(支持多用户在线)
转发注明出处:http://www.cnblogs.com/0zcl/p/6259128.html 一.需求 1. 用户加密认证 (完成)2. 允许同时多用户登录 (完成)3. 每个用户有自己的家目录 ...
- Swing JComboBox的使用
1:JComboBox的使用:类层次结构图: java.lang.Object --java.awt.Component --java.awt.Container --javax.swing.JCom ...
- js之date()对象
var date = new Date(); var year = date.getFullYear(); ; var day = date.getDate(); var week = date.ge ...
- （@WhiteTaken）设计模式学习——简单工厂
最近工作比较忙,所以没有怎么写博客,这几天将集中学习一下(厉风行)讲解的设计模式的相关知识,并对主要的代码进行介绍. 言归正传,接下来介绍最简单也是最基础的简单工厂设计模式. 什么是简单工厂? 简单工 ...
- 重写titleView
在一些特定的情况下不能使用原有的titleView需要重写titleView代码如下 #import "TitleView.h" @implementation TitleView ...
- Swift2.0 UITextView 和 UITextFile 的使用
在Swift2.0中,UITextFile 和 UITextView 的使用总体上和在OC中是一样的,今天只是给大家一段代码,然后说UITextView里面的光标位置的问题.先看他们使用的简单的代码 ...
- java Socket(TCP)编程小项目
package 服务器端相关操作; import java.io.Serializable; /* * 创建存储需要传输信息的对象,方便客户端向服务器端传送数据 */ public class Cli ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- Java-8ATM
源代码: import java.util.Scanner;interface fangfa{ public void show();public void qukuan();public void ...
- 特性Attribute 的使用
[IdentityAuthorize] public ActionResult Index() { return View("~/V ...