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 ...
随机推荐
- 【mybatis】mybatis中 的# 和 $的区别
mybatis中 的# 和 $的区别 参考地址:https://www.cnblogs.com/sxdcgaq8080/p/10869144.html
- WEB安全漏洞与防范
1.XSS 原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的.如,盗取用户Cookie信息.破坏页面结构.重定向到其 ...
- ES6里关于模板字面量的拓展
JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出JS已有的字符串体系 ...
- window.onerror事件用来自定义错误处理
Event reference: https://developer.mozilla.org/en-US/docs/Web/Events http://w3c.github.io/html/ ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (九)Thymeleaf用法——Themeleaf注释
4. 注释 模板名称:comment.html 4.1 标准 HTML/XML注释 语法:<!-- --> 4.2 解析器级注释块(Parser-level ...
- iOS应用程序开发之内购
内购简介 配置iTunes Connect iOS客户端开发工作 一.内购简介 1⃣️通过苹果应用程序商店有三种主要赚钱的方式: –直接收费(与国内大部分用户的消费习惯相悖,如果直接收费,不要设置为6 ...
- PHP面试题及答案解析(6)—PHP网络编程
1.禁用COOKIE后SEESION还能用吗? 可以,COOKIE和SESSION都是用来实现会话机制的,由于http协议是无状态的,所以要想跟踪一个用户在同一个网站之间不同页面的状态,需要有这么一个 ...
- Atitit.程序包装exe启动器 打包 发布 设计 -生成exe java
Atitit.程序包装exe启动器 打包 发布 设计 -生成exe java 1. 要实现的功能1 2. ahk是个好东东..能启动了...1 3. exe4j vs nativej1 4. 2 ...
- Atitit. Atiposter 发帖机版本历史 编年史
Atitit. Atiposter 发帖机版本历史 编年史 V1 初步实现sina csdn cnblogs V2 实现qzone sohu 的发帖功能 顺便重构接口实现分离 V3多文件循环发帖 ...