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 ...
随机推荐
- python下性能提示
性能提示 3.1 嵌套if/else结构比一系列单选if结构块,因为只要有一个条件满足,其余测试就会终止. 3.2 在嵌套if/else结构中,把最可能成立的条件放在该嵌套结构的开始处.和把不常见的条 ...
- Spring注释事务失效及解决办法
如果带上事务,那么用annotation方式的事务注解和bean配置,事务会失效,要将service bean配置到xml文件中才行 在主容器中(applicationContext.xml),将C ...
- Hibernate分页功能数据重复问题
今天遇到一个很憋屈的问题那就是hibernate分页查询中出现重复数据,本来一直没有在意,以为是数据问题,但是一查程序和数据都没有问题,继续深入查看,找到问题了就是order By 时出的问题,唉.. ...
- ES6里的解构赋值
我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程. 一.引入背景 在ES5中,开发者们为 ...
- 【Hadoop】Flink VS Spark?Drill VS Presto?
参考资料: drill 官网:http://drill.apache.org/ drill安装使用:https://segmentfault.com/a/1190000002652348 drill简 ...
- win10 如何配置 java jdk1.8环境变量(2017.8.17 )jdk1.8.0_144
win10 如何配置 java jdk 环境变量 2017.8.17 本篇还适用于 windows server 2012. windows server 2014+ 一.安装 下载 jdk 64位 ...
- C#基于Socket的CS模式的完整例子
基于Socket服务器端实现本例主要是建立多客户端与服务器之间的数据传输,首先设计服务器.打开VS2008,在D:\C#\ch17目录下建立名为SocketServer的Windows应用程序.打开工 ...
- [Tools] Create a Simple CLI Tool in Node.js with CAC
Command-line tools can help you with all sorts of tasks. This lesson covers the very basics of setti ...
- cpu、内存、硬盘
grep -c 'model name' /proc/cpuinfo
- lodash 移除假值数组 compact
创建一个移除了所有假值的数组.例如:false.null. 0."".undefined, 以及NaN 都是 “假值”. <!DOCTYPE html> <htm ...