用CSS滤镜实现颜色渐变效果
如何用CSS实现颜色渐变效果,在Photoshop中实现颜色渐变的效果是通过渐变工具实现的,但是你知道吗对于一般的颜色渐变CSS同样可以完成。通过CSS完成颜色渐变可以减少网页大小,而且可以很方便的改变渐变效果的颜色。
通过progid:DXImageTransform.Microsoft.Gradient滤镜可以方便的实现渐变效果。
代码大致如下
示例代码progid:DXImageTransform.Microsoft.Gradient(startColorStr=''lightblue'',endColorStr=''#FFFFFF'',gradientType=''1'');
语法
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。
说明
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
让我们来看一下下面的的例子:
示例代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh">
<headprofile="http://www.w3.org/2000/08/w3c-synd/#">
<FCK:metahttp-equiv="content-language"content="zh-cn"/>
<FCK:metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<title>CSS实现颜色渐变效果-CSS在线</title>
<style>
body{
font-size:14px;
margin-left:60px
}
#Blue{
height:40px;
width:200px;
padding:3;
border:lightblue1pxsolid;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='lightblue',endColorStr='#FFFFFF',gradientType='1');
}
#Green{
height:40px;
width:200px;
padding:3;
border:lightblue1pxsolid;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='lightgreen',endColorStr='#FFFFFF',gradientType='1');
}
SPAN{
height:25px;
width:225px;
padding:3px;
FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr='lightblue',endColorStr='#FFFFFF',gradientType='0');
}
</STYLE>
</head>
<body>
<SPAN>CSS在线介绍</SPAN><br/><br/>
<DIVid=Blue>颜色渐变效果试验</DIV>
<DIVid=Green>颜色渐变效果试验</DIV>
</body>
</html>