background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);(标准)

linear-gradient 在 ie9 以下是不支持的,所以对于 ie6 - ie8 我们可以使用滤镜来解决。如下代码:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#fFF,GradientType=0);
:root {filter:none;}(需要针对 ie9 单独处理滤镜效果)

gradientType=1代表横向渐变
gradientType=0代表纵向淅变。 上面的代码没有透明度变化,如果需要透明度还是使用滤镜
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
(1)opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。0为完全透明 100不透明
(2)finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
(3)style用来指定透明区域的形状特征:
  0 代表统一形状
  1 代表线形
  2 代表放射状
  3 代表矩形
(4)startx 渐变透明效果开始处的 X坐标
   starty 渐变透明效果开始处的 Y坐标
(5)finishx 渐变透明效果结束处的 X坐标
   finishy 渐变透明效果结束处的 Y坐标 例子:ie下的透明度背景色
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#000,endcolorstr=fff,gradientType=0);   

IE浏览器下的渐变背景的更多相关文章

  1. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

  2. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  3. 第161天:CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  4. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  5. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  6. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  7. 渐变背景(background)效果

    chrom and Safari浏览器: webkit核心的浏览器.使用CSS3渐变方法(css-gradient) -webkit-gradient(type, start_point, end_p ...

  8. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

  9. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

随机推荐

  1. CentOS7更换yum源为阿里云镜像源

    1. 备份原来的yum源 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置aliyun的y ...

  2. 20165224 陆艺杰 Exp5 MSF基础应用

    用自己的话解释什么是exploit,payload,encode Exploit是攻击的行为 Payload是一段植入目标机的简短的带功能的恶意代码 Encode是编码,用于更改恶意代码,编码特征码检 ...

  3. COCO2018 stuff分割

    stuff何许人也,相对于目标而言的环境信息,一般是图像中的草地,墙面或者天空,因为往往在一张图像中这些背景占据着大部分像素,对于场景理解必不可少,所以引入了这一任务. 不过目前这个任务还没有发布te ...

  4. redux超易学三篇之二(开始使用react-redux)

    其实 redux 真正让人感到混乱的还是在 react-redux 的使用中. 请配合完整代码参考~:完整源代码 也不是说混乱,主要是网上 推崇 最佳实践.学习一个新东西的时候,本来就很陌生,上来就用 ...

  5. 64位的notepad++没有插件管理

    下载的64位的notepad++没有插件管理:需要自己下载这个插件: - plugin manager的下载地址为:https://github.com/bruderstein/nppPluginMa ...

  6. FFT 深夜摸鱼小笔记

    本次笔记学习自算法导论 FFT核心:系数表示→(单位复数根)点值表示→(插值)系数表示 关于单位复数根 n次单位复数根\(ω\)为满足\(ω^n=1\)的复数 n次单位复数根恰好有n个,表示为\(ω_ ...

  7. HDU - 2089 数位DP 初步

    中文题目,不要62和4 从高位往低位DP,注意有界标志limit的传递 dp2记忆有界情况下的计数结果,据说用处不大 我所参考的入门文章就是半搜索(有界)半记忆(无界)的 进阶指南中提出dfs维度有多 ...

  8. javascript有哪些优秀的库,把你喜欢的都说出来吧

    回复格式 应用领域 ……  你喜欢的js库名称 …… 作用(一句话) web …… jquery …… 众所周知的dom操作库 seajs …… js的管理框架 ejs  ……  没有学习成本的js模 ...

  9. 【实战】简述一次挖XSS的经历

    值守尤其是夜班真的是件痛苦的事情呀,献给还在值守岗位上奋斗的小伙伴们. 简单试了前面几个参数,发现c0-id这个参数值在响应包里有回显,截图如下: 把c0-id参数值改为xss,响应包内容也随之变化, ...

  10. Java中使用nextLine(); 没有输入就自动跳过的问题

    转自:https://www.cnblogs.com/1020182600HENG/p/6564795.html [问题分析] 必要的知识:in.nextLine();不能放在in.nextInt() ...