CSS3背景颜色渐变效果
1、firefox浏览器:
background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff);
2、safari、chrome浏览器:
background-image: -webkit-gradient(linear, % %, % %,from(#eef9fe), to(#d1ecff));
3、Opera浏览器:
background-image: -o-linear-gradient(top , #eef9fe, #d1ecff);
4、IE浏览器:
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradientType=);
注意:其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。
上面IE浏览器代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用:
filter:alpha(opacity= finishopacity= style= startx=,starty=,finishx=,finishy=) opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
综上所述:在IE浏览器中要实现既含有透明度又含有渐变的效果的话,CSS代码如下:
filter:alpha(opacity= finishopacity= style= startx=,starty=,finishx=,finishy=)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradientType=);
-ms-filter:alpha(opacity= finishopacity= style= startx=,starty=,finishx=,finishy=) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=);
更多具体的解析可参考:
http://www.zhangxinxu.com/wordpress/?p=743
CSS3背景颜色渐变效果的更多相关文章
- css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
- Android开发---如何操作资源目录中的资源文件3--圆角边框、背景颜色渐变效果、边框颜色
Android开发---如何操作资源目录中的资源文件3 效果图 1.圆角边框 2.背景颜色渐变效果 1.activity_main.xml 描述: 定义了一个shape资源管理按钮 <?xml ...
- css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
- 【Android 界面效果20】Android GradientDrawable类的详解,设置activity的背景颜色渐变效果
看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...
- Android GradientDrawable类的详解,设置activity的背景颜色渐变效果
看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...
- CSS3的颜色渐变效果
在 animate.css寻找自己想要的动态效果,看到标题Animate.css和按钮Animate it的颜色在逐渐变化,觉得蛮有趣的,把控制变化的相关代码扒了下来,自己分析实现一波. 一开始认为使 ...
- css3背景颜色渐变
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- css实现背景颜色渐变效果
自己学的一些渐变:background:linear-gradient(90deg,#4EB9E7 -50%,#3691BE 50%,#2E83B0 100%); IE没有效果 详细访问: http: ...
- CSS3实现背景颜色渐变
CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...
随机推荐
- Redmine管理项目3-调整用户显示格式
在 Redmine 中新建用户时是这样的: 必须指定姓氏.名字,然后 Redmine 默认是按“名字 姓氏”这种方式显示用户.比如“张三”,会显示成“三张”……看起来好别扭啊. 怎么调整呢,参看 Re ...
- C# WinForm 类似QQ靠近屏幕边缘隐藏显示
当窗体离屏幕四周一定距离时,改变窗体位置,引导窗体靠边:靠边后,当鼠标离开窗体时,改变窗体位置,窗体隐藏,凸出一点在屏幕内:隐藏后,当鼠标移到窗体时,窗体显示. using System; using ...
- MVC JsonResult
public JsonResult GetJson() { var res = new JsonResult(); res.Data = new {isSucceed = true, returnMs ...
- 深入理解Solaris内核中互斥锁(mutex)与条件变量(condvar)之协同工作原理
在Solaris上写内核模块总是会用到互斥锁(mutex)与条件变量(condvar), 光阴荏苒日月如梭弹指一挥间,Solaris的大船说沉就要沉了,此刻心情不是太好(Orz).每次被年轻的有才华的 ...
- 【转载】pygame安装与两种版本的Python兼容问题
在开始学习游戏编程之前,我们先来安装下pygame和python3.2.5 参考园友: http://www.cnblogs.com/hongten/p/hongten_pygame_install. ...
- JavaSE中主要的类与方法
1.instanceof:测试左边的对象是否是右边类的实例; 数组.length:返回的是数组的长度; 2.Scanner类 nextInt():读取键盘录入的整数; next():读取键 ...
- 升级ruby
1.安装 RVM RVM:Ruby Version Manager,Ruby版本管理器,包括Ruby的版本管理和Gem库管理(gemset) $ curl -L get.rvm.io | bash - ...
- Redis 数据序列化方法 serialize, msgpack, json, hprose 比较
最近弄 Redis ,涉及数据序列化存储的问题,对比了:JSON, Serialize, Msgpack, Hprose 四种方式 1. 对序列化后的字符串长度对比: 测试代码: $arr = [0, ...
- C#Winform实现自动更新
服务端: [WebMethod] public string GetNewService(string version) { //通过版本号进行比较 if (version == "v1.0 ...
- Spring Security(14)——权限鉴定基础
目录 1.1 Spring Security的AOP Advice思想 1.2 AbstractSecurityInterceptor 1.2.1 ConfigAttribute ...