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

 在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. 网站性能优化实战——从12.67s到1.06s的故事

    文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...

  2. day2：day1作业 字符编码

    1,使用while循环输出1,2,3,4,5,6,8,9 # 使用while循环输出1,2,3,4,5,6,8,9 num = 1 while num <= 10: if num != 7: p ...

  3. 微博登录报错 sso package orsign error

    https://blog.csdn.net/gao_chun/article/details/41344725 (1)检查应用包名签名信息是否完善 如果你的应用只有一个包名.签名,请在 http:// ...

  4. 使用Python + Selenium破解滑块验证码

    在前面一篇博客<使用 Python + Selenium 打造浏览器爬虫>中,我介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全 ...

  5. adg的数据传输应用三大模式转换

    1.最大可用性模式(Maximum Availability) 1)该模式提供了仅次于"最大保护模式"的数据保护能力: 2)要求至少一个物理备库收到重做日志后,主库的事务才能够提交 ...

  6. JQPRINT-不错的jquery打印插件

    1.首先引用Jquery和jqprint-0.3.js(依赖于Jquery的) <script language="javascript" src="jquery- ...

  7. 洛谷P3224 永无乡 [HNOI2012] 线段树/splay/treap

    正解:线段树合并 解题报告: 传送门! 这题也是有很多解法,eg:splay,treap,... 然而我都不会我会学的QAQ! 反正今天就只讲下线段树合并怎么做QAQ 首先看到这样子的说第k重要的是什 ...

  8. Redis入门到高可用（九）——有序集合zset

    一.数据结构 集合与有序集合,列表与有序集合的对比 二.主要API zadd 将一个或多个 member 元素及其 score 值加入到有序集 key 当中. zrem 移除有序集 key 中的一个或 ...

  9. git branch 命令查看分支、删除远程分支、本地分支

    git branch 命令操作 1.查看本地分支 : git branch 前面带有*号的是当前分支 2 .删除本地分支: git branch -d [branchname] 提示删除了一个名为li ...

  10. vue中$set的用法

    数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)