FILTER:progid:DXImageTransform.Microsoft.Gradient使用

来源:互联网 发布:投资软件靠谱吗 编辑:程序博客网 时间:2024/05/20 09:45
FILTER:progid:DXImageTransform.Microsoft.Gradient使用 
语法: 
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 。 
说明: 
在对象的背景和内容之间显示定制的色彩层。 
当此效果通过转变显示时,在渐变册色彩层之上的文本程序性的初始化为透明的,当色彩渐变实现后,文本颜色会以其定义的值更新。 
示例: 
#idDiv{

position:absolute;

left:140px;

height:400;

width:400;

filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;

}


具体使用 
<table border=1 width=100%> 
<tr> 
<td STYLE="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000')"> </td> 
</tr> 
</table>

 

html {

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

}

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

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

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

}


今天看到css的渐变色效果  呵呵不错  和大家分享一下

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)

startColorStr='#ffeeeeee'

startColorStr为渐变起始颜色,ff为16进制透明度

endColorStr='#ffeeeeee'

endColorStr为渐变结束颜色,ff为16进制透明度

gradientType='0'

gradientType渐变方向,'0'为垂直方向, '1'为水平方向(默认值为'1')

 

------------------------------------------------------------------------

这是最简单的

用css实现网页背景渐变的代码如下:

一、从上往下渐变 Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}

二、从左上至右下渐变  Example Source Code:
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}

三、从左往右渐变  Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}

 四、从上往下渐变  Example Source Code:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startC





一、IE浏览器下的渐变背景

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

相关说明:
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用:

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)


二、线性渐变在 Webkit 下的应用

chrome/Safari浏览器下的渐变背景实现

语法:



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

  参数:-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop 函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色

.gradient{    width:300px;    height:150px;    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  }<div class="gradient"></div>

三、线性渐变在 Opera 下的应用

语法:

 
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);/* Opera 11.10+ */

  参数:-o-linear-gradient 有三个参数。第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。(注:Opera 支持的版本有限,本例测试都是在 Opera11.1 版本下,后面不在提示)


四、线性渐变在 Mozilla 下的应用

语法

 
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

  参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。


Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

.gradient{    width:300px;    height:150px;    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  }<div class="gradient"></div>



阅读全文
1 0