`

css 背景渐变

 
阅读更多

一、此CSS滤镜用法详解

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) ;}

#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;}
具体使用
 
<table border=1 width=100%>
<tr>
<td STYLE="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000')">&nbsp;</td>
</tr>
</table>
 

语法:STYLE="filter:filtername(fparameter1, fparameter2...)" 
  (Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数) 

  滤镜说明: 

  Alpha:设置透明层次 
  blur:创建高速度移动效果,即模糊效果 
  Chroma:制作专用颜色透明 
  DropShadow:创建对象的固定影子 
  FlipH:创建水平镜像图片 
  FlipV:创建垂直镜像图片 
  glow:加光辉在附近对象的边外 
  gray:把图片灰度化 
  invert:反色 
  light:创建光源在对象上 
  mask:创建透明掩膜在对象上 
  shadow:创建偏移固定影子 
  wave:波纹效果 
  Xray:使对象变得像被x光照射一样 

  1、滤镜:Alpha 
  语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 
  说明: 
  Opacity:起始值,取值为0~100, 0为透明,100为原图。 
  FinishOpacity:目标值。 
  Style:1或2或3 
  StartX:任意值 
  StartY:任意值 
  例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 

  2、滤镜:blur 
  语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" 
  说明: 
  Add:一般为1,或0。 
  Direction:角度,0~315度,步长为45度。 
  Strength:效果增长的数值,一般5即可。 
  例子:filter:Blur(Add="1",Direction="45",Strength="5") 

  3、滤镜:Chroma 
  语法:STYLE="filter:Chroma(Color = color)" 
  说明:color:#rrggbb格式,任意。 
  例子:filter:Chroma(Color="#FFFFFF") 

  4、滤镜:DropShadow 
  语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" 
  说明:Color:#rrggbb格式,任意。 
  Offx:X轴偏离值。 
  Offy:Y轴偏离值。 
  Positive:1或0。 
  例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1") 

  5、滤镜:FlipH 
  语法:STYLE="filter:FlipH" 
  例子:filter:FlipH 

  6、滤镜:FlipV 
  语法:STYLE="filter:FlipV" 
  例子:filter:FlipV 

  7、滤镜:glow 
  语法:STYLE="filter:Glow(Color=color, Strength=strength)" 
  说明: 
  Color:发光颜色。 
  Strength:强度(0-100) 
  例子:filter:Glow(Color="#6699CC",Strength="5") 

  8、滤镜:gray 
  语法:STYLE="filter:Gray" 
  例子:filter:Gray 

  9、滤镜:invert 
  语法:STYLE="filter:Invert" 
  例子:filter:Invert 

  10、滤镜:mask 
  语法:STYLE="filter:Mask(Color=color)" 
  例子:filter:Mask (Color="#FFFFE0") 

  11、滤镜:shadow 
  语法:filter:Shadow(Color=color, Direction=direction) 
  说明: 
  Color:#rrggbb格式。 
  Direction:角度,0-315度,步长为45度。 
  例子:filter:Shadow (Color="#6699CC", Direction="135") 

  12、滤镜:wave 
  语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength) 
  说明: 
  Add:一般为1,或0。 
  Freq:变形值。 
  LightStrength:变形百分比。 
  Phase:角度变形百分比。 
  Strength:变形强度。 
  例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2") 

  13、滤镜:Xray 
  语法:STYLE="filter:Xray" 
  例子:filter:Xray

14.颜色变化
语法:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

 

 

二、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)

其中各个参数的含义如下:
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。 
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。 
finishx 渐变透明效果结束处的 X坐标。 
finishy 渐变透明效果结束处的 Y坐标。

综合上述,实现IE下含透明度变化红蓝垂直渐变的代码如下:

.gradient{
    width:300px;
    height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}

<div class="gradient"></div>

 

结果如下图:

 

IE6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活

三、Firefox浏览器下的渐变背景

对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:

.gradient{
    width:300px;
    height:150px;
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
}

<div class="gradient"></div>

此段代码在Firefox3.6浏览器下的效果是:

Firefox3.6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活

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

对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient,使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了,参见下面的代码:

.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>

此段代码在Safari 4浏览器下的效果是:

Safari下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活

补充于2011-04-07
Opera11也支持了CSS3渐变。其用法与Firefox一致,需要使用-o-的前缀。另外,Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。

五、综合 – 兼容性的渐变背景效果

相关代码如下:

.gradient{
    width:300px;
    height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/	
    background:red; /* 一些不支持背景渐变的浏览器 */  
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
}

<div class="gradient"></div>

效果分别为上面三个分类的截图。

分享到:
评论

相关推荐

    css背景渐变几种样式

    CSS 渐变(Gradients)是网页设计中一种常见的视觉效果,...总的来说,CSS背景渐变为网页设计增添了丰富的视觉层次感,而理解和掌握不同方式的渐变实现,可以帮助开发者更好地创造出美观且适应多浏览器环境的网页设计。

    CSS 背景渐变

    CSS 设计指南学习小结

    文字3D效果设计,css背景渐变色代码必备.rar

    本资源是一份名为《文字3D效果设计,css背景渐变色代码必备.rar》的压缩包,其中包含了一系列实用的CSS代码和设计技巧,可以帮助用户快速实现文字3D效果和背景渐变色设计。适用人群包括前端开发人员、网页设计师、UI...

    纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip

    例如,我们可以为Loading元素创建一个从深色到浅色的背景渐变: ```css .loading-icon { background: linear-gradient(to right, #002244, #4488cc); } ``` 此外,为了让动画更具有科技感,我们还可以添加光效。...

    css背景样式渐变代码

    ### CSS背景渐变的语法 CSS3引入了背景渐变的属性,允许开发者创建线性渐变、径向渐变以及重复渐变。其中,线性渐变是最常用的一种形式,它可以通过`background-image`属性配合`linear-gradient()`函数来实现。例如...

    详解CSS背景渐变图片transtion过渡效果技巧

    background-image 不支持CSS3 transition ,而CSS3 gradient渐变作为背景图片存在的时候,下面的CSS设置是不会有过渡效果的。 .gradient { background-image: linear-gradient(to right, olive, green); ...

    background-generator:CSS背景渐变生成器

    【背景生成器与CSS背景渐变】 在网页设计中,背景元素的视觉效果往往对整个网站的美学起到至关重要的作用。"background-generator"是一个基于JavaScript的工具,它旨在帮助开发者和设计师快速、轻松地创建出具有吸引...

    CSS 网页背景渐变实现代码

    总的来说,理解并掌握CSS背景渐变的实现方式,无论是对于提升网页的视觉体验还是兼容性处理,都是非常重要的技能。随着技术的发展,CSS3渐变已成为主流,但了解IE的滤镜语法仍然有助于处理遗留的IE兼容性问题。

    css背景色渐变

    总结,CSS背景色渐变是一个强大的设计工具,通过灵活运用线性渐变、径向渐变、颜色透明度和重复渐变等特性,我们可以创造出各种独特的网页视觉效果。学习并掌握这些技巧,将有助于提升网页设计的专业性和创新性。在...

    CSS实现背景颜色渐变

    CSS实现背景颜色渐变,通过CSS滤镜使背景渐变,特殊情况下值得考虑的一个方案~

    纯css3背景渐变按钮特效.zip

    "纯css3背景渐变按钮特效.zip" 这个标题指的是一个使用纯CSS3技术实现的、带有背景渐变效果的按钮特效的压缩包文件。CSS3是层叠样式表的第三版,它引入了许多新的特性和功能,其中就包括丰富的颜色过渡和渐变效果。...

    css颜色渐变菜单效果

    除了背景渐变,我们还可以通过`border-image`属性实现边框的渐变效果,或者使用`text-shadow`来为文本添加渐变阴影。 在提供的文件列表中,`Color.htm`可能是展示颜色渐变菜单效果的HTML文件,而`CJL.0.1.min.js`...

    前端工具 - CSS3渐变效果源码

    在CSS3中,渐变(Gradients)是一种强大的视觉设计元素,可以平滑地过渡颜色,为网页背景或图形添加丰富的视觉效果。CSS3提供了线性渐变(Linear Gradient)和径向渐变(Radial Gradient)两种类型。 1. **线性渐变...

    div+css背景渐变色代码示例

    在CSS(层叠样式表)中,我们可以用多种方法实现背景渐变效果。本文将详细解释如何通过`div+css`实现一个从红色渐变到黑色的背景效果。 首先,让我们了解渐变色的基本概念。在CSS中,背景渐变是一种颜色过渡效果,...

    背景渐变H5+css代码

    简单的背景渐变代码,使用H5和Css3实现,主要采用渐变函数

    可视化CSS3渐变背景颜色代码生成插件

    【可视化CSS3渐变背景颜色代码生成插件】是一个便捷的工具,专为网页开发者设计,旨在简化CSS3线性渐变背景的创建过程。这款插件提供了直观的图形界面,用户可以通过操作不同参数,实时预览并生成相应的CSS3代码。 ...

    纯js+css3渐变进度条动画特效

    脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...

    example-gradients:在HTML电子邮件中使用CSS背景渐变,并为Outlook使用VML后备

    范本包括2个示例: -在模板内的元素上使用渐变-身体背景渐变兼容性模板使用CSS background-image线性渐变以及Outlook的VML后备功能,这意味着它可以在所有电子邮件客户端的87%以上使用(可能甚至更多,Mac的许多...

Global site tag (gtag.js) - Google Analytics