RGBA与半透明背景
概念
所谓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与半透明背景的更多相关文章
- 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景
IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...
- Framework 7 之 给Picker Modal 添加半透明背景
官网的效果图如下: 效果图如下: 我们需要在显示下面浮层的时候显示后面的半透明背景,Framework 7 里面默认有个半透明背景,如下图: 解决方案: 1.在</body>标签之前添加& ...
- 兼容ie的半透明背景颜色过滤器,会影响事件的触发.
兼容ie的半透明背景颜色过滤器,会影响事件的触发.
- 如何使用纯js实现一个带有灰色半透明背景的弹出框
原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...
- IE8下兼容rgba颜色的半透明背景
在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...
- 半透明背景(兼容IE)
在CSS3中有rgba属性,可以很方便的实现背景透明,但对于IE家族来说却不是那么容易实现: FireFox.chrome.opera.safari 凡是对支持CSS3且支持W3标准的浏览器都可以现实 ...
- 使用rgba设置输入框背景透明
项目中遇到要求输入框的背景设置透明度,但文字不受影响,如下图 输入框使用input标签 <input ref="searchText" type="search&q ...
- div半透明背景,文字不透明
background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...
- css3实现气泡效果的聊天框
因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...
随机推荐
- 【微信】微信小程序 应用内的页面跳转在添加了tab以后就跳转不成功的问题解决
在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了 原本代码如下: //事件处理函数 bindViewTap: function() { wx.na ...
- Linqpad使用(调试Linq、结合linq调试业务场景、表格内编辑数据)
linqpad是一款linq语句调试工具,功能如下: 1.直接执行linq语句并查看生成的原生sql语句 2.可结合linq+C#代码进行业务场景调试 3.表格内直接新增.修改.删除数据 4.直接 ...
- Gradle Distributions
Gradle Distributions services.gradle.org/ distributions/ gradle-3.4-rc-3-all.zip 13-Feb-2017 14:55 + ...
- eclipse 启动报错 java was started but returned code=13
eclipse启动不了,出现“Java was started but returned exit code=13......”对话框如下 我的解决方法是:去控制面板--程序--卸载程序和功能下面查看 ...
- Cocos2dx 粒子销毁问题
Cocos2dx 粒子销毁问题 DionysosLai(906391500@qq.com) 2014-7-3 之前在调试粒子特效时,在粒子编辑器有个选项是用来调整粒子的生命时间,当粒子存在的时间 ...
- php不重新编译添加模块
php不重新编译添加模块 本文以安装mysqli模块为例 一.检查 1:首先保证php-fpm能正常启动 2:查看当前已安装的php模块是否有mysqli [root@web01 ~]# /appli ...
- phpMyAdmin搭建及管理多台数据库服务器
phpMyAdmin搭建及管理多台数据库服务器 环境说明: 系统版本 CentOS 6.9 x86_64 软件版本 nginx-1.12.2 php-5.5. ...
- Cygwin-安装和配置ssh服务
Cygwin介绍: Cygwin是一个在windows平台上执行的类UNIX模拟环境.它对于学习UNIX/Linux操作环境,或者从UNIX到Windows的应用程序移植,或者进行某些特殊的开发工作, ...
- Win10系统如何关闭"启用病毒防护""启用Windows防火墙"提示?
Win10系统如何关闭"启用病毒防护""启用Windows防火墙"提示? 目前已经有不少有用户升级到了win10正式版系统,不过有一些原win7/win8. ...
- jquery load方式浏览器断点调试
jquery load的方式引入的,如果需要在浏览器中断点调试,需要在代码中使用debugger进行断点