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 ...
随机推荐
- bmp,jpg,png,tif,wmf,emf与eps图片格式转换
wmf/emf是两种Microsoft Windows的图形文件格式.它是一个矢量图格式,但是也允许包含位图.本质上,一个WMF文件保存一系列可以用来重建图片的Windows GDI命令.在某种程度上 ...
- Camera图像处理原理及实例分析
Camera图像处理原理及实例分析 作者:刘旭晖 colorant@163.com 转载请注明出处 BLOG:http://blog.csdn.net/colorant/ 主页:http://rg ...
- 用new和delete运算符进行动态分配和撤销存储空间
測试描写叙述:暂时开辟一个存储空间以存放一个结构体数据 #include <iostream> #include <string> using namespace std; s ...
- ASP.NET MVC学习---(六)CRUD例子补充
在之前,我们使用mvc做了一个crud的小例子 整个项目过程应该是能够很容易理解的 通过这个例子我们可以大概的了解mvc的基本使用方法 但是由于篇幅限制(还不如说自己懒不想写那么长...) 没有能够在 ...
- 配置php扩展memcache
配置php扩展memcache 环境说明: 系统版本 CentOS 6.9 x86_64 软件版本 nginx-1.12.2 php-5.5.38 ...
- 错误:“The requested resource () is not available.”的处置
做网页过程中,某页需要以新窗方式打开另一个网页,于是url是这样写: pages/test/transw/claimer.html 但是,点链接后网页提示 The requested resource ...
- 系统封装 如何修改别人的PE为己所用
我们以修改"我心如水 WIN7PE_16.99.1 维护版.ISO"为例,整个ISO的核心文件就是这个BOOT.WIM,我们先把他提取出来. 然后用在本教程第一章学到的东西,用AI ...
- redis中的事务(版本2.6.16)
一.命令支持 1.multi 开始事务 2.exec事务提交 3.取消事务discard 二.事务示例 1.示例 redis>set key1 20OKredis>mutilOKredis ...
- ubuntu12.04 下安装nodejs
liunx里面安装nodejs我也找了非常多文章,貌似对非常多liunx新手来讲不是非常清楚,以下是我结合一些文章,亲自实践得到的安装步骤.同一时候还有大家关心的与seajs紧密相关的spm模块的安装 ...
- 【转】Intellij IDEA常用配置详解
1. IDEA内存优化 先看看你机器本身的配置而配置. \IntelliJ IDEA 8\bin\idea.exe.vmoptions -------------------------------- ...