(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/285,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出。)

rgba()函数可以用来设置透明的颜色,元素的背景啊,边框啊等等。rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。

在现代浏览器中是支持rgba的。但是在ie8等古董级浏览器中是不支持rgba的,但是如果客户要求页面兼容到ie8呢,切一个半透明的png24背景吗?或者给ie8设置一个其他的颜色?前者明显很低级,后者效果又不好。怎么解决呢,别忘了ie的透明滤镜filter啊。

直接贴代码:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);

参数解释:

startColorStr和endColorStr的值#7F000000,

前两位是十六进制的透明度,也就是透明值为0.5,

后面六位是十六进制的颜色000000(黑色),如果是白色,就写成ffffff。

rgba 和IE下filter数值的转换

用这种方法,ie8也能兼容rgba了,非常实用的小技巧。

实际使用时,可以加在条件注释中,只对ie8起作用。

【学习】ie8支持rgba()透明度颜色的更多相关文章

  1. 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景

    IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...

  2. IE兼容rgba()透明度

    一般浏览器的背景透明度可以直接设置 background:rgba(0,0,0,.5); -webkit-background:rgba(0,0,0,.5); -o-background:rgba(0 ...

  3. IE8支持HTML5的占位符placeholder

    /*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placehol ...

  4. 让IE7 IE8支持CSS3 background-size属性

    简介 CSS3 新增的 background-size 是一个很有用的属性,用于定义背景图片的尺寸,有了这个属性,你就可以任意指定背景图片的大小.其中最常用的值应该要数 cover 了,该值能让背景图 ...

  5. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  6. 让IE8支持HTML5及canvas功能!

    微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...

  7. 让ie8支持 placeholder 属性

    一.  ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...

  8. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  9. IE7&IE8不支持rgba的方法

    使用滤镜功能 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF0000 ...

随机推荐

  1. 201521123091 《Java程序设计》第12周学习总结

    Java 第十一周总结 第十一周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 4.课后阅读 1.本章学习总结 1.1 以你喜欢的方式(思维导图 ...

  2. 201521123082 《Java程序设计》第13周学习总结

    201521123082 <Java程序设计>第13周学习总结 标签(空格分隔): java 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. ...

  3. 【Alpha阶段】第七次scrum meeting

    一.会议照片 二.会议内容 姓名 学号 负责模块 昨日任务 今日任务 杨爱清 099 界面设计和交互功能 [完成]设计界面 交互功能连接并优化 杨立鑫 100 数据库搭建和其他 [完成]将数据库与其他 ...

  4. 扫雷游戏制作过程(C#描述):第二节、界面设计

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 扫雷界面设计 界面的设计,首先需要创建一个菜单栏.具体方法在左边找到工具箱窗口,展开其中的菜单和工具栏,找到MenuStrip选项,双 ...

  5. 201521123045 《Java程序设计》第5周学习总结

    第5周-继承.多态.抽象类与接口 1. 本周学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试 ...

  6. 201521123072《Java程序设计》第1周学习总结

    201521123072<Java程序设计>第1周学习总结 标签(空格分隔): JAVA学习 1,本周学习总结 了解了JDK,JRE,JVM,学会使用cmd中一些简单的命令 了解了Java ...

  7. 201521123081《java程序设计》 第13周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 参考资料:XMind 2. 书面作业 Q1. 网络基础 1.1 比较 ...

  8. 201521123048 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  9. Markdown 练习

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  10. php数据库操作小要点

    保留小数点后两位 $ba = floor(($v[2]/$sum[0][0])*10000); //取整数 $bb = $ba/100; //两位小数 列的值加一可以直接用自身,不用单独查询出来 $s ...