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

 在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. 用pymysql操作MySQL数据库

    工具库安装 pip install pymysql 连接关闭数据库与增删改查操作 # 导入pymysql库 import pymysql # 打开数据库连接 # 参数1:数据库服务器所在的主机+端口号 ...

  2. Exception 02 : java.lang.ClassNotFoundException: Could not load requested class : com.mysql.jdbc.Driver

    异常名称 java.lang.ClassNotFoundException: Could not load requested class : com.mysql.jdbc.Driver 异常详细信息 ...

  3. linux添加新硬盘

    1.添加新磁盘 2.fdisk -l查看磁盘被识别的名称 3.如果输入fdisk -l命令没有找到新的磁盘,按下面步骤操作 1)进入到cd /sys/class/scsi_host/ 2)echo & ...

  4. [skill][http] http管道化连接

    已知http的请求响应是一对一的. 就是一个请求跟着接下来的响应便是与之配对了. 而另一种方式, 可以依靠顺序, 即发送多个http请求, 然后返回对个http响应. 严格按照顺序将他们对应起来, 称 ...

  5. 转：ActiveMQ的作用总结(应用场景及优势)

    原文地址: ActiveMQ的作用总结(应用场景及优势) 业务场景说明: 消息队列在大型电子商务类网站,如京东.淘宝.去哪儿等网站有着深入的应用, 队列的主要作用是消除高并发访问高峰,加快网站的响应速 ...

  6. Excel--数据透视图

    原文:https://ke.qq.com/course/289406 1.数据源注意项 2. 3.选中数据源操作 任意选中数据源表格中的单元格(有值得单元格),插入数据透视表 默认数据源区域就是整个表 ...

  7. Nginx之基本介绍（一）

    这是一篇介绍Nginx基本信息和配置文件详情的文章,适合入门者,如果你想深入了解Nginx请绕道 什么是Nginx? Nginx是轻量级,高性能,跨平台的web服务器 Nginx的特点 更快 单个请求 ...

  8. MyBatis的生命周期

    MyBatis的生命周期 所谓的生命周期就是第一个对象应该存活的时间,比如一些对象一次用完后就要关闭,使它们被Java虚拟机(JVM)销毁,以避免继续占用资源,所以我们会根据每一个组件的作用去确定其生 ...

  9. 如何在js中将统计代码图标隐藏

    建站时我们都会加一下网站统计,方便把控内容的内容的运营.大部分站长安装的站点统计是第三方统计代码,js形式的,很少用以服务器日志为基础分析的统计.(当然能通过网站日志来分析网站的运营者比一般的站长水平 ...

  10. OC动画CABasicAnimation

    //1.创建动画 CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"]; //1.1设 ...