【web开发】IE8浏览器兼容rgba()
1.问题:
实现一个背景透明的效果,用CSS3用rgba()就能实现,兼容到IE8,没有透明效果,因为IE8不支持rgba()函数。
background: rgba(0,0,0,.5);
2.rgba()函数
rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。
background: rgb(0, 0, 0); /*不支持rgba的浏览器*/
background: rgba(0,0,0,.5); /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的,但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢?很简单,先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。
解释下#7f000000,第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(0,0,0,)对应#000;都是黑色。
到这里,rgba的用法就可以兼容IE8了。
最近看到,不直接在样式里面添加filter,而是利用来为ie添加filter兼容。在过后又发现IE9同时支持RGBA和filter,导致两个重叠,透明效果变差,所以需要改为,
具体做法如下:
<!--[if lt IE 9]><style type="text/css">.color-block {background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);zoom: 1;}</style><![endif]-->
【web开发】IE8浏览器兼容rgba()相关推荐
- Web前端开发之浏览器兼容问题
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- [Web开发] IE8 网页开发参考文档
IE8在兼容Web 标准方面做了巨大的改进,所以和以往的IE版本有非常大的差异. 以下是一些文档帮助Web 开发者了解IE8 内核引擎的变化,以便开发出更好更炫的网页. HTML and CSS Su ...
- IE8浏览器兼容问题(日常经验总结)
ie8对待颜色值,最完整的就是 #ffffff 6位16进制数,三位也支持,但是4位就不支持了.所以以后在书写颜色值代码最好都写全了,防止不必要的bug,加班.... module.exports 与 ...
- 移动web开发介绍——浏览器
前段时间了解学习了一下<移动Web手册>,觉得真的需要这种不是偏向技术.框架或工具的书籍,只是单纯的讲解一些关于移动Web最基本的知识.正好今天整理一部分之前学习过的内容,记录和分享,也方 ...
- rgba背景是黑灰色html,IE8下兼容rgba颜色的半透明背景_html/css_WEB-ITnose
在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...
- Web开发实用浏览器(工具)插件
1.PowerBand PowerBand是一个IE的插件(同时也支持MyIE2/Maxthon).提供了对HTML动态分析,跟踪,编辑的功能.能够方便快捷的分析HTML页面的结构,有助于网页设计人员 ...
- web开发时浏览器兼容性问题汇总
最近在搞leaflet在IE8下兼容性问题,特将遇到的各种情况记录如下,持续更新 1.IE8中,position设置为static时,设置top无效,需设置为absolute后,可自由设置其位置,而不 ...
- css3 flex的IE8浏览器兼容问题
我这是进行判断浏览器 css判断ie版本才引用样式或css文件 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> &l ...
- WEB开发——图片浏览器
实验效果: 实验源码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
最新文章
- extundelete数据恢复实战!!!
- java代码走查常见错误_FindBugs常见错误描述和解决方法
- 数据中心节能专题—他山之石可以攻玉
- rrnDB数据库简介-16S基因多拷贝数的证据
- linux (centos)下安装 mongodb v3.2 笔记(启动的时候可以指定配置文件)
- 关于时钟、中断的理解
- ajax ssm 页面跳转_Shiro 教程,Ajax请求拦截跳转页面方案
- mvc框架java包怎么划分_java – 在MVC模式中将模型和动作划分为类...
- 大家的芝麻信用分都是多少?
- 【机器人】关键问题:动捕原点坐标系到机械臂基坐标系的转换
- word2vec算法
- 匠能电子:55寸0.88mm拼接屏与1.7mm拼接屏的对比效果
- xposed修改手机屏幕分辨率
- 前端面试题总结(js、html、小程序、React、算法、vue 、全栈热门视频资源)
- 区块链学习笔记:区块链到底能干什么
- 使用Python打印乘法口诀表
- web开发中前端页面是如何跟后端服务器数据交互的
- Django基础九之中间件
- pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
- C++11 FAQ中文版
热门文章
- 面向对象程序设计实验报告
- 中国78比特量子计算机,迄今错误率最低量子比特面世 有望推进量子计算机研发...
- C#在国内这么惨的么?
- 如何破解大型网站的登录
- oracle导出1455,oracle 11g导出数据时报ORA 1455错误的处理方法
- python熊猫弹幕_GitHub - qingyuj/danmu: Python 弹幕包 A live danmu package for python
- 信息素养—学术研究的必修课习题答案(week7-12)(第4-7章)
- 麒麟桌面系统配置samba共享
- 计算机内部线有,电脑主机内部有几根线?分别叫什么?
- 牛客练习赛24 B 凤 凰