第一篇:滤镜opacityfilter的透明效果兼容性解决方案RGBRGBA介绍项目中需要实现透明遮罩效果,使用opacityfilter会使得内部元素都透明,而实际中的文字内容我们不想让其透明
第一篇:滤镜opacity/filter的透明效果兼容性解决方案RGB/RGBA介绍
项目中需要实现透明遮罩效果,使用opacity/filter会使得内部元素都透明,而实际中的文字内容我们不想让其透明化,这时候就需要考虑其他的实现方法。
我们知道,RGB色彩就是常说的三原色,RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,故而也称为加色模式。RGB模式又称RGB色空间。RGB色彩系统几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
与加色模式对应的是适合印刷的CMYK色彩模式,也称减色色彩模式。CMYK代表印刷上用的四种颜色,C代表青色(Cyan),M代表洋红色(Magenta),Y代表黄色(Yellow),K代表黑色(Black)。因为在实际引用中,青色、洋红色和黄色很难叠加形成真正的黑色,最多不过是褐色而已。因此才引入了K——黑色。黑色的作用是强化暗调,加深暗部色彩。CMYK模式是最佳的打印模式,因RGB模式尽管色彩多,但不能完全打印出来。用CMYK模式编辑虽然能够避免色彩的损失,但运算速度很慢。所以现实中的设备,如扫描仪和显示器,都是在RGB模式编辑,再转换为CMYK模式,其中加入了一些必要的色彩校正技术手段,最终打印/输出。
在前端开发中,我们不只用到RGB比较多,而且RGBA也会常常用到。实际上,RGBA是在RGB的基础上增加了控制alpha透明度的参数A。其中,R、G、B三个参数的整数取值范围为:0 ~ 255,百分数值的取值范围为:0.0% ~ 100.0%。超出范围的数值将被截至其最接近的取值极限。不过,并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。
直接了当的说,RGBa模式是一种包含透明效果的颜色设置方法,语法如下:
//CSS Document
div {
background: rgba(0, 0, 0, 0.5);
}
它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。(除非使用怪异的定位hack) 跨浏览器透明同样颇为棘手。
通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素:
RGBA的浏览器兼容性:
类型 |
Internet Explorer |
Firefox |
Chrome |
Opera |
Safari |
版本 |
(×)IE6 |
(√)Firefox 3.0.10 |
(√)Chrome 2.0.x |
(√)Opera 9.64 |
(√)Safari 4 |
(×)IE7 |
|
|
|
|
(×)IE8 |
|
|
|
|
(√)IE9 |
不兼容的解决方案:声明一个保留颜色
并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
不过,这条退路在某些古董级浏览器中依然无效。
RGBa的浏览器支持情况
浏览器,版本,操作系统 |
测试结果 |
退路 |
Firefox 3.0.5 (OS X, Windows XP, Vista) |
支持 |
— |
Firefox 2.0.0.18 (PC) |
不支持 |
纯色 |
Safari 4 (Developer Preview, Mac) |
支持 |
— |
Safari 3.2.1 (PC) |
支持 |
— |
Mobile Safari (iPhone) |
支持 |
— |
Opera 9.6.1 |
不支持 |
纯色 |
IE 5.5 (PC via IETester) |
不支持 |
无色 |
IE 6 (PC via IETester) |
不支持 |
纯色 |
IE 7 |
不支持 |
纯色 |
IE 8 beta 2 |
不支持 |
纯色 |
Google Chrome 1.0.154.43 |
支持 |
— |
Google Chrome 1.0.154.46 |
支持 |
— |
Netscape 4.8 (PC) |
不支持 |
没有颜色 |
SeaMonkey 1.1.14 |
不支持 |
无色 |
SeaMonkey 1.1.16 |
不支持 |
纯色 |
SeaMonkey 2.0 beta3 |
支持 |
— |
Sunrise 1.7.5 |
支持 |
— |
Stainless 0.2.5 |
支持 |
– |
Flock 2.0.2 |
支持 |
– |
BlackBerry Storm Browser |
支持 |
纯色 |
Camino 1.6.6 |
不支持 |
纯色 |
上面的数据是通过测试demo得到的,该测试页面包含了更多更完整的浏览器兼容性列表。(译自: css-tricks)
最佳解决方案:对IE浏览器的更好的退路
方案一:CSS3PIE
插件CSS3PIE 可以使得IE 6-9 版本能够输出大多数非常有用CSS3修饰特性。当然,CSSPIE可以让color、background、 box-shadow支持RGBA
div.demo{
color:rgba(0,0,0,.5);
background:rgba(0,0,0,.5);
-pie-background:rgba(0,0,0,.5);/*IE6-9*/
box-shadow: 1px 1px rgba(0,0,0,.5);/*仅在未设置模糊值的情况下支持rgba*/
}
方案二:filter滤镜
通过IE滤镜让背景色透明化,模拟rgba透明效果。
因为IE浏览器支持条件注释,我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果:
注意:StartColorStr和EndColorStr的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。
2位透明度的换算方法:x=alpha*255 ,将计算的结果x转换成十六进制即可。
经测试,RGBa颜色可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,FF在border的拐角处会出现叠加,比如透明度是0.4,那么在FF中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。这一点本人暂未验证。
第二篇:线性渐变-linear-gradient的介绍,RGB/RGBA与16进制转换方法
下面结合网络上的各种说法,总结一下线性渐变语法及其RGBA颜色模式和16进制颜色转变的方法:
CSS3新增的颜色渐变属性极大的丰富了网络色彩的世界,也进一步增强了前端开发人员工作的便利性和页面的可维护性。
线性渐变在Mozilla下的语法:
-moz-linear-gradient( [ || ,]? , [, ]* )
线性渐变在Webkit下的语法:
-webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法
-webkit-gradient(, [, ]?, [, ]? [, ]*) //老式语法书写
线性渐变在Trident (IE)下的语法:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#111CCC, endColorstr=#1CC222);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#111CCC, endColorstr=#1CC222)";
对比:
火狐下的样式background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
IE下: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2FFFFFF', endColorstr='#00FFFFFF',GradientType=0 ); /* IE6-9 */
语法:
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
属性:
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false
true: 默认值。滤镜激活。
false:滤镜被禁止。
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
特性:
Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0
1:默认值。水平渐变。
0:垂直渐变。
StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时,也可以用十六进制格式: 0xAARRGGBB 。
说明:在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时,在渐变册色彩层之上的文本程序性的初始化为透明的,当色彩渐变实现后,文本颜色会以其定义的值更新。
测试demo代码:
外层div:这是背景图片内层div:测试透明效果
在FF,Chrome,IE下测试通过,预览效果图:
附:滤镜的实用案例
哀悼日,各网站页面全部用黑白色,用以下滤镜!!
为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装
如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:
有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议
请将网页最头部的替换为以上代码。
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:
最简单的把页面变成灰色的代码是在head 之间加
最后,附上一些常用的在线调色工具:
RGB颜色转换十六进制颜色http://www.quman.org/article/article0009.html
Gradient Generator http://gradcolor.com/
CSS3 PIE (which makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.)http://css3pie.com/
推荐阅读
-
本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ...
[详细]
蜡笔小新 2023-12-11 20:23:23
-
本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ...
[详细]
蜡笔小新 2023-12-13 10:58:55
-
-
本文介绍了一种在PHP中对二维数组根据某个字段进行排序的方法,以年龄字段为例,按照倒序的方式进行排序,并给出了具体的代码实现。 ...
[详细]
蜡笔小新 2023-12-11 10:56:01
-
本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
-
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
-
本文介绍了eclipse学习中的第三章内容,主要讲解了ssh中的Hibernate的缓存,包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ...
[详细]
蜡笔小新 2023-12-14 00:31:35
-
本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ...
[详细]
蜡笔小新 2023-12-13 17:39:50
-
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
-
本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ...
[详细]
蜡笔小新 2023-12-13 15:38:19
-
本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ...
[详细]
蜡笔小新 2023-12-13 14:17:11
-
本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ...
[详细]
蜡笔小新 2023-12-11 19:55:40
-
本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ...
[详细]
蜡笔小新 2023-12-13 10:06:58
-
本文介绍了MyBatis多表查询与动态SQL的使用方法,包括一对一查询和一对多查询。同时还介绍了动态SQL的使用,包括if标签、trim标签、where标签、set标签和foreach标签的用法。文章还提供了相关的配置信息和示例代码。 ...
[详细]
蜡笔小新 2023-12-12 17:12:51
-
本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ...
[详细]
蜡笔小新 2023-12-11 16:20:50
-
本文介绍了Android中的assets目录和raw目录的共同点和区别,包括获取资源的方法、目录结构的限制以及列出资源的能力。同时,还解释了raw目录中资源文件生成的ID,并说明了这些目录的使用方法。 ...
[详细]
蜡笔小新 2023-12-11 12:26:25
-
手机用户2502896021
这个家伙很懒,什么也没留下!