概念

所谓RGBA颜色,就是RGB三原色加ALPHA。在给背景加入颜色的同一时候。提供透明度特性。

用法

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

支持情况

Firefox 3.0.5

支持

Safari

支持

Google Chrome

支持

IE

Fuck!

!!!

IE怎么办

在做弹出层遮罩的时候。我们经经常使用到filter:alpha(opacity=50)。这个就是解决方式吗?试试看吧。当你发现文本所有继承了半透明属性。

不得不说,IE在滤镜上还是花了非常多功夫的。我们能够使用filter:progid:DXImageTransform.Microsoft.Gradient ,对,这个是渐变滤镜,可是能够实现背景透明这个滤镜有两个选项,一个是startColorStr,另外一个就是end。关于选项的值,跟RGBA非常类似的,仅仅只是从10进制改成了16进制。而且ALPHA放到了前面,

startColorStr = #00ffeedd , 00就是透明度,剩下的就是16进制的RGB颜色。

实例:

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#77000000,endcolorstr=#77000000);

RGBA与半透明背景的更多相关文章

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

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

  2. Framework 7 之 给Picker Modal 添加半透明背景

    官网的效果图如下: 效果图如下: 我们需要在显示下面浮层的时候显示后面的半透明背景,Framework 7 里面默认有个半透明背景,如下图: 解决方案: 1.在</body>标签之前添加& ...

  3. 兼容ie的半透明背景颜色过滤器,会影响事件的触发.

    兼容ie的半透明背景颜色过滤器,会影响事件的触发.

  4. 如何使用纯js实现一个带有灰色半透明背景的弹出框

    原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...

  5. IE8下兼容rgba颜色的半透明背景

    在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...

  6. 半透明背景(兼容IE)

    在CSS3中有rgba属性,可以很方便的实现背景透明,但对于IE家族来说却不是那么容易实现: FireFox.chrome.opera.safari 凡是对支持CSS3且支持W3标准的浏览器都可以现实 ...

  7. 使用rgba设置输入框背景透明

    项目中遇到要求输入框的背景设置透明度,但文字不受影响,如下图 输入框使用input标签 <input ref="searchText" type="search&q ...

  8. div半透明背景,文字不透明

    background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...

  9. css3实现气泡效果的聊天框

    因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...

随机推荐

  1. 【微信】微信小程序 应用内的页面跳转在添加了tab以后就跳转不成功的问题解决

    在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了 原本代码如下: //事件处理函数 bindViewTap: function() { wx.na ...

  2. Linqpad使用(调试Linq、结合linq调试业务场景、表格内编辑数据)

      linqpad是一款linq语句调试工具,功能如下: 1.直接执行linq语句并查看生成的原生sql语句 2.可结合linq+C#代码进行业务场景调试 3.表格内直接新增.修改.删除数据 4.直接 ...

  3. Gradle Distributions

    Gradle Distributions services.gradle.org/ distributions/ gradle-3.4-rc-3-all.zip 13-Feb-2017 14:55 + ...

  4. eclipse 启动报错 java was started but returned code=13

    eclipse启动不了,出现“Java was started but returned exit code=13......”对话框如下 我的解决方法是:去控制面板--程序--卸载程序和功能下面查看 ...

  5. Cocos2dx 粒子销毁问题

    Cocos2dx    粒子销毁问题 DionysosLai(906391500@qq.com) 2014-7-3 之前在调试粒子特效时,在粒子编辑器有个选项是用来调整粒子的生命时间,当粒子存在的时间 ...

  6. php不重新编译添加模块

    php不重新编译添加模块 本文以安装mysqli模块为例 一.检查 1:首先保证php-fpm能正常启动 2:查看当前已安装的php模块是否有mysqli [root@web01 ~]# /appli ...

  7. phpMyAdmin搭建及管理多台数据库服务器

    phpMyAdmin搭建及管理多台数据库服务器 环境说明: 系统版本    CentOS 6.9 x86_64         软件版本    nginx-1.12.2        php-5.5. ...

  8. Cygwin-安装和配置ssh服务

    Cygwin介绍: Cygwin是一个在windows平台上执行的类UNIX模拟环境.它对于学习UNIX/Linux操作环境,或者从UNIX到Windows的应用程序移植,或者进行某些特殊的开发工作, ...

  9. Win10系统如何关闭"启用病毒防护""启用Windows防火墙"提示?

    Win10系统如何关闭"启用病毒防护""启用Windows防火墙"提示?   目前已经有不少有用户升级到了win10正式版系统,不过有一些原win7/win8. ...

  10. jquery load方式浏览器断点调试

    jquery load的方式引入的,如果需要在浏览器中断点调试,需要在代码中使用debugger进行断点