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

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


先说下背景色透明,背景色透明,在现代浏览器中,可以用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. (原)安装windows8.1和ubuntu16双系统及相互访问磁盘

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638232.html 参考网址: http://jingyan.baidu.com/article/f ...

  2. Java中关于final关键字

    final关键字,大学时一直没有理解,伴随到工作,郁闷......也可能大学真的没认真去学习 首先,final给人一看英语单词 不就是最终的嘛,最终的什么的呢 ? 小张现在就带大家 学习下..... ...

  3. ThinkPhp调用webservice

    模板页: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. python 多线程、多进程

    一.首先说下多线程.多进程用途及异同点,另外还涉及到队列的,memcache.redis的操作等: 1.在python中,如果一个程序是IO密集的操作,使用多线程:运算密集的操作使用多进程. 但是,其 ...

  5. wordpress教程之在非single.php页面调用文章的信息

    使用Wordpress的朋友可能遇到这样的问题,在非single.php页面中我们有时候想要调用当前文章的标题.内容等信息,而Wordpress在生成文章页的时候在各个页面中唯一不变的只有当前的文章I ...

  6. Qt5中生成和使用静态库

    在QT中静态库的后缀名为.a,在vs中开发的静态库后缀名为.lib.QT版本为5.2.1,系统为Windows. 一. 静态库的生成 新建项目. 新建一个静态库的项目,如图1.1所示:项目名称为tes ...

  7. SQL Server 索引的图形界面操作 <第十二篇>

    一.索引的图形界面操作 SQL Server非常强大的就是图形界面操作.关于索引方面也一样那么强大,很多操作比如说重建索引啊,查看各种统计信息啊,都能够通过图形界面快速查看和操作,下面来看看SQL S ...

  8. Android Studio 调试过程中快捷查看断点处变量值(Ctrl+Shift+I无效)?

    当你在做Keymap到Eclipse后,在debug过程中,在Eclipse中我们很喜欢用Ctrl+Shift+I去查看一个运算或者调用的结果,这样用起来很方便.但是keymap到Eclipse后,你 ...

  9. python定时器爬取豆瓣音乐Top榜歌名

    python定时器爬取豆瓣音乐Top榜歌名 作者:vpoet mail:vpoet_sir@163.com 注:这些小demo都是前段时间为了学python写的,现在贴出来纯粹是为了和大家分享一下 # ...

  10. POJ 2263 Heavy Cargo(Floyd + map)

    Heavy Cargo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3768   Accepted: 2013 Descr ...