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. linux负载均衡与性能监控

    平均负载是单位时间内, 系统处于可运行状态和不可中断状态的平均进程数( 平均活跃进程数 ) 可运行状体好理解, 就是进程正在运行状态Running和可运行状态Runnable... 这里需要注意的是 ...

  2. JSP使用Struts2标签库报错

    JSP中使用<%@ taglib prefix="s" uri="/struts-tags" %>报错:Cannot find the tag li ...

  3. fork 炸弹

    一段古老的Linux shell程序 :() { :|:& };: 这是bash shell的写法,首先定义了一个函数:(),花括号里面是函数体,这里递归执行函数本身,通过管道在后台再递归运行 ...

  4. [Beta阶段]第一次Scrum Meeting

    Scrum Meeting博客目录 [Beta阶段]第一次Scrum Meeting 基本信息 名称 时间 地点 时长 第一次Scrum Meeting 19/04/29 大运村寝室6楼 70min ...

  5. SOAP XML报文解析

    import java.util.HashMap;import java.util.List;import java.util.Map; import org.dom4j.Document;impor ...

  6. UVA - 11388 唯一分解定理

    题意:给出G和L,求最小的a使得gcd(a,b)=G,lcm(a,b)=L 显然a>=G,所以a取G,b要满足质因子质数为L的同次数,b取L //此处应有代码

  7. java - list 报java.lang.UnsupportedOperationException

    情景 现在有个数组,比如:String[]  array = new String[]{"1","2","3"}; 我们想要往这个数组中添加 ...

  8. 腾讯云(Linux)安装.net core sdk2.1、net core runtime2.1

    按照微软指令安装: sdk2.1:https://www.microsoft.com/net/download/linux-package-manager/centos/sdk-current 1. ...

  9. docker 启动容器报错

    2018-10-24 报错信息: /usr/bin/docker-current: Error response from daemon: driver failed programming exte ...

  10. CentOS-pam认证机制简介

    前言 linux下PAM模块全称是Pluggable Authentication Module for linux(可插入式授权管理模块),该由Sun公司提供,在Linux中,PAM是可动态配置的, ...