线性渐变-linear-gradient和滤镜opacity/filter的透明效果兼容性解决方案及其RGB/RGBA与16进制转换方法

最新推荐文章于 2025-09-10 11:45:25 发布

清枫草塘

最新推荐文章于 2025-09-10 11:45:25 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：渐变效果透明效果 filter opacity RGBA

本文链接：https://blog.csdn.net/freshlover/article/details/8855313

前端开发专栏收录该内容

42 篇文章

订阅专栏

本文介绍了RGBA颜色模式及线性渐变在不同浏览器中的兼容性解决方案，包括使用CSS3PIE插件和IE滤镜等方法，确保跨浏览器的一致表现。

第一篇：滤镜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滤镜来实现同样的效果：

<!--[if IE]>
   <style type="text/css">
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#79C83636,endColorstr=#79C83636);
       zoom: 1;
    }
    </style>
<![endif]-->

注意：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( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

线性渐变在Webkit下的语法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写

线性渐变在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代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body{
	font-weight:bold;
	font-size:20px;
}
#out{
   color:blue;
   width:400px;
   height:300px;
   background:url("http://data.travel.china.com/travelhtml/pic/200903/p12378735145832.jpg") scroll center center no-repeat transparent;
   position:relative;
}
div.demo {
   //background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
   //opacity:.3;
   //filter:alpha(opacity=80);
   position:absolute;
   left:0;
   top:0;
   padding:50px;
   color:red;
   
}

-->
</style>
<!--[if IE]>
   <style type="text/css">
   /*startColorStr与endColorStr是经过rgba(200, 54, 54, 0.5)换算而来*/
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#79C83636,endColorstr=#79C83636);
       zoom: 1;
    } 
    </style>
<![endif]-->
<title>线性渐变-linear-gradient和滤镜opacity/filter的透明效果兼容性解决方案及其RGB/RGBA与16进制转换方法</title>
</head>

<body>

<div  id="out" class="">
	<span>外层div:这是背景图片</span>
	<div class="demo color-block">
		<span>内层div:测试透明效果</span>
	<div>
</div>
</body>
</html>

在FF，Chrome，IE下测试通过，预览效果图：

附：滤镜的实用案例

哀悼日，各网站页面全部用黑白色，用以下滤镜！！

为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装

如果网站没有使用CSS，可以在网页/模板的HTML代码和之间插入：

<style type="text/css">
html{
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>

有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

请将网页最头部的替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：

最简单的把页面变成灰色的代码是在head 之间加

<style>
html {
    FILTER: gray
}
</style>

最后，附上一些常用的在线调色工具：

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/