实现背景的渐变可以通过为背景添加颜色渐变的图片,也可以使用浏览器的功能来为背景添加渐变的颜色

 在IE6或IE7浏览器下可以使用一下示例的CSS语句,设置filter属性来实现颜色

 filter:progid:DXImageTransform.Microsoft.gradient(enabled=true,gradientType=0,startColorStr=#f0f0f0,endColorStr=#020202);

 enabled:滤镜开关选项,其值可以是true或者false,分别用来打开和关闭滤镜;

 gradientType:渐变类型,其值为1时表示水平渐变,其值为0时表示垂直渐变;

 startColorStr:上端或左侧的起始颜色;

 endColorStr:下端或右侧的结束颜色

 background-image:-moz-linear-gradient(起始点||角度,{颜色,位置},{颜色,位置}...........);《火狐浏览器》

 background-image:-webkit-linear-gradient(起始点||角度,{颜色,位置},{颜色,位置}...........);《谷歌浏览器》

 background-image:-moz-linear-gradient(起始点||角度,{颜色,位置},{颜色,位置}...........);

HTML-CSS线性渐变的更多相关文章

  1. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  2. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  3. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  4. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  5. 兼容IE与firefox、chrome的css 线性渐变(linear-gradient)

    现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF ...

  6. 兼容IE与firefox的css 线性渐变(linear-gradient)

    IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900 ...

  7. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css之为文本添加线性渐变和外描边

    css之为文本添加线性渐变和外描边  一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...

  9. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  10. 线性渐变css

    从上到下的线性渐变: #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background ...

随机推荐

  1. opencv模板匹配有趣的链接

    https://docs.opencv.org/3.0-beta/doc/py_tutorials/py_imgproc/py_template_matching/py_template_matchi ...

  2. 垃圾回收GC3种算法的衍生品 增量回收:预测和控制GC所产生的中断时间

    小结: 1.GC和程序处理的本质是无关的: 2.增量回收:预测和控制GC所产生的中断时间: 1. 分代回收 GC和程序处理的本质是无关的,因此它所消耗的时间越短越好.分代回收的目的,正是为了在程序 运 ...

  3. mysql帮助命令

    HELP contents 查看MySQL命令的使用. eg: HELP 'Data Type' 查看所有的数据类型的使用方法.

  4. idhttp与cookie

    用关键词“idhttp cookie”在各大搜索引擎得到的结果,大多千篇一律,如果你搜索到这一篇,恭喜你,你有福了. 以下内容测试环境:delphi2007,  winxp sp3, indy10. ...

  5. SecureCRT使用总结

    设置背景和编码

  6. js 正则判断字符串下划线的长度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 集齐所有机制的按键控制LED驱动

    内核版本:linux2.6.22.6 硬件平台:JZ2440 驱动源码 final_key.c : #include <linux/module.h> #include <linux ...

  8. finecms如何调用多个栏目的子栏目

    前面我们说到了finecms如何调用多个指定栏目的内容,finecms如何调用多个栏目的子栏目呢?用下面的代码就可以实现了,其中id是具体的栏目id,用“,”逗号隔开 {list action=cat ...

  9. 20180925 SQL Server游标使用

    之前写了一个存储过程 目标: 根据时间,获取指定范围的数据集A, 再从数据集A 中,取出每行数据中的两个时间,卡另外一个B表里面的某列时间范围的值集.得到均值进行配置值比对. 这里有个问题,就是取得B ...

  10. 安装setuptools

    1.下载地址:https://pypi.python.org/pypi/setuptools 2.这是一个压缩文件,将其解压到安装目录,并进入该文件夹,按住shift键后,在文件夹空白处点击鼠标右键, ...