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

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


先说下背景色透明,背景色透明,在现代浏览器中,可以用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. [转]PictureEx.h和PictureEx.cpp源文件

    要显示一个gif,网上找了个,子类化了MFCl图片控件,用着方便,记一下 转自:http://www.bccn.net/Article/net/vcnet/jszl/200709/6386.html ...

  2. 【solr专题之二】配置文件:solr.xml solrConfig.xml schema.xml

    1.关于默认搜索域 If you are using the Lucene query parser, queries that don't specify a field name will use ...

  3. JQuery validator扩展

    //validator 扩展 jQuery.validator.addMethod("mail", function(value, element, messages) { ret ...

  4. 如何调用EcStore中的API接口

    EcStore系统已内置了丰富的API接口供外部系统调用(接口列表见文章最下面),外部系统具体如何调用这些API呢? 例如有一个PHP的论坛需要调用ecstore系统内一个商品的详情,则可以使用b2c ...

  5. Mysql SlowLog 工具 pt-query-diglist

    工具地址:http://www.percona.com/doc/percona-toolkit/ 安装依赖工具 yum install perl-Time-HiRes 编译安装 perl Makefi ...

  6. apache主目录,配置文件目录结构说明

    apache服务安装成功后,主要的目录结构如下: |-- bin 程序命令目录[apache执行文件的目录如apachectl,htpassed] |-- build |-- cgi-bin 预设给一 ...

  7. QSizePolicy可均匀调整控件的大小,还可设置比例,非常完美(每个QWidget都有这个功能)

    http://blog.csdn.net/liang19890820/article/details/51986284 它是QWidget的固有属性: http://doc.qt.io/qt-4.8/ ...

  8. SQL学习笔记——SQL初入门,Ubuntu下MySQL的安装

          刚开始接触sql,于是准备在Ubuntu下学习sql,就跟着itercast的sql教程开始入门了. 下面只是我个人的记录,高手请绕道: 一. 在安装之前,我们可以用下面这个命令通过开放端 ...

  9. ant的入门 配置与安装

    最近需要用ant来生成文件,java类.我才开始了解了这个工具.仔细看了一下,感觉这个小工具的强大功能. 博主也是初学者,在网上收集了资料,尝试了配置:感觉有些高手写得不错变引用之. 配置如下: 以上 ...

  10. 【转】HDMI控制与组态剖析

    HDMI能够称霸为王者之尊吗?目前消费者陷入的困境就是Audio/Video的连接线数量过度庞大,而HDMI最大卖点之一就是可使用单一的连接线完全取代众多的影音连接线,简洁又方便.缺点是技术版本变动太 ...