团队里经常遇到,索性整理一起

是我们在前端开发中经常遇到的,在问题中经常遇到的两个问题是背景色透明整体透明


先说下背景色透明,背景色透明,在现代浏览器中,可以用rgba颜色作为背景色。

简单介绍下rgba色,这个是在css3 出现的标准。所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。通过改变a的值来改变透明度。

background:rgba(200, 54, 54, 0.5);

这个颜色就是透明度为0.5的颜色背景,

如何处理兼容如果想要IE也支持颜色透明,那就要动用IE的私有滤镜

FILTER:progid:DXImageTransform.Microsoft.Gradient

兼容写法实例:

background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

这里的7F是十六进制的表达方式,00 为最小的透明度(完全透明)FF为最大透明值(完全不透明)


下面说下整体透明

整体透明区别于背景色透明就是整个元素的都是透明的,在css3新的标准中为

opacity: .5;

兼容IE的写法

/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

ie8下的透明 问题的更多相关文章

  1. ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

    目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...

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

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

  3. (转)解决png图片在IE6下不透明的方法

    来源于:http://xzl52199.blog.163.com/blog/static/95206446201142174540220/ 一.传统的JavaScript方法 思路: 1.一个专门解决 ...

  4. ie8下jquery改变PNG的opacity出现黑边

    复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...

  5. 使用ie的filter来解决rgba在IE8下没有效果的问题

    使用ie的filter来解决rgba在IE8下没有效果的问题,css代码如下: background: rgba(255,255,255,0.1); filter:progid:DXImageTran ...

  6. IE8下导入EXCEL数据传到客户端以附件下载

    IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...

  7. echarts在IE8下遮挡其他组件的问题

    echarts的图在IE8下会浮在上层遮挡住其他组件,解决方式是页面中引入 <meta http-equiv="X-UA-Compatible" content=" ...

  8. jquery.validate.js在IE8下报错不运行

    因为项目要表单验证,所以特意去找了jquery.validate这个应该是jquery官方团队出品的表单验证插件. 实际应用时,却在IE8调试时碰到了问题. 从jquery.validate官网下载了 ...

  9. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

随机推荐

  1. (原+译)win7远程连接ubuntu16.04

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5711214.html 原始网址: http://ubuntuhandbook.org/index.ph ...

  2. mac下 WebStorm下主题包安装

    mac下: 主题包 1.mac下,点击桌面,使用shift+command+G 输入:~/Library/Preferences 前往(mac查找安装目录的方法,因为默认这些文件夹是隐藏的),进入We ...

  3. Eclipse Juno 配置反编译插件

    1 下载最新的jadClipse插件,地址:http://sourceforge.net/projects/jadclipse/files/jadclipse3.3/ 2 将net.sf.jadcli ...

  4. 观点:哪些人适合做FPGA开发?(转)

    原文:http://xilinx.eetrend.com/blog/561 FPGA目前非常火,各个高校也开了FPGA的课程,但是FPGA并不是每个人都适合,FPGA讲究的是一个入道,入什么道,入电子 ...

  5. LintCode-A + B 用位操作模拟加法

    class Solution { public: /* * @param a: The first integer * @param b: The second integer * @return: ...

  6. PHP 表单处理

    PHP 超全局变量 $_GET 和 $_POST 用于收集表单数据(form-data). PHP - 一个简单的 HTML 表单 下面的例子显示了一个简单的 HTML 表单,它包含两个输入字段和一个 ...

  7. jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方 ...

  8. HDU 1559 最大子矩阵 (DP)

    题目地址:pid=1559">HDU 1559 构造二维前缀和矩阵.即矩阵上的点a[i][j]表示左上方的点为(0,0),右下方的点为(i,j)的矩阵的和.然后枚举每一个矩阵的左上方的 ...

  9. iOS安全攻防(二十三):Objective-C代码混淆

    iOS安全攻防(二十三):Objective-C代码混淆 class-dump能够非常方便的导出程序头文件,不仅让攻击者了解了程序结构方便逆向,还让着急赶进度时写出的欠完好的程序给同行留下笑柄. 所以 ...

  10. Python 练习 —— 2048

    1. 引言 2048 这段时间火的不行啊,大家都纷纷仿造,"百家争鸣",于是出现了各种技术版本号:除了手机版本号,还有C语言版.Qt版.Web版.java版.C#版等,刚好我接触P ...