实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.linear{
width:100%;
height:600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/
background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/
background-image:
-webkit-gradient(linear,left bottom,left top,color-start(0,
#15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216',
endColorstr='#fafafa'); /*IE6 & IE7*/
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216',
endColorstr='#fafafa')"; /* IE8 */
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

效果图：

转载自：http://www.jb51.net/web/147304.html

通过CSS实现的html背景色渐变的更多相关文章

  1. 谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. css 背景色渐变---和背景色透明

    1 背景色渐变 background:#fb0000; background: -webkit-gradient(linear, left top, left bottom, color-stop(0 ...

  3. css中的背景色渐变以及背景图的定位

    单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd) ...

  4. CSS3之背景色渐变

    在css2时代,页面背景色渐变,按钮背景渐变效果主要是通过图片实现,css3中可通过 gradient 实现背景色渐变,图片作为一种资源,每次在页面加载时都要从服务器下载,这样如果页面很大需要渐变的效 ...

  5. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、！！！表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  6. jquery animate()背景色渐变的处理

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...

  7. JS---案例：点击按钮设置div背景色渐变

    案例:点击按钮设置div背景色渐变 背景色渐变:设置透明度 <div id="dv"></div> <input type="button& ...

  8. css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  9. 【css】css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

随机推荐

  1. tableView异步下载图片/SDWebImage图片缓存原理

    问题说明:假设tableView的每个cell上的imageView的image都是从网络上获取的数据.如何解决图片延迟加载(显示很慢).程序卡顿.图片错误显示.图片跳动的问题. 需要解决的问题: 1 ...

  2. Linux基础3（文件权限）

    文件权限 1.普通权限 (登陆用户对文件或目录的读写执行的权限) 普通权限对管理员用户无效 文件和目录 都有4中类型的用户u 所有者 : 文件.目录的创建者g 所属组 : 文件.目录属于的用户组o 其 ...

  3. Debugger 怎么用

    Debugger 是一个很有用的工具,尤其对于workflow开发人员来说.可以帮助我们check 从source 到target的数据流.我们可以看到什么数据从source中流出,在接下来的tran ...

  4. springMVC-数据绑定流程

    1.Spring MVC主框架将ServletRequest对象以及目标方法的入参实例传递给WebDataBinderFactory实例,以创建DataBinder(数据绑定器)实例对象 2.Data ...

  5. Linux下创建文本文件（vi/vim命令使用详解）

    vi test.txt 或者 vim test.txt vim是vi的升级版,指令更多,功能更强. 下面是收集的vim用法,当在vim里面要实现退出,首先要做的是按[Esc],然后再输入[:wq] 一 ...

  6. CameraFlash手电筒

    有时候晚上找不到电棒,电灯,咱们可以写个小程序,利用照相机的闪光灯临时顶替上代码: 1 package com.linux.cameraflash; import android.hardware.C ...

  7. ini_set()函数的使用 以及 post_max_size,upload_max_filesize的修改方法

    Apache服务器处理: ini_set('display_errors', 'Off');ini_set('memory_limit', -1); //-1 / 10240Mini_set(&quo ...

  8. Windows装机必备软件列表

    经常装系统,列个List,以后装完之后安装软件直接参照使用!windows版: 输入法: 搜狗输入法(由于长期使用导致此输入法十分熟悉我的输入习惯,以无法自拔).支持Linux.Windows(太穷还 ...

  9. jpa注解

    http://www.oracle.com/technetwork/cn/middleware/ias/toplink-jpa-annotations-100895-zhs.html#ManyToOn ...

  10. xml小记1

    xml小记1 关于边框的实现 这是一个比较简单的东西,但是今天莫名的低效率,在这上面花了比较多的时间.之前有咨询过同学如何实现单向的边框,他们采用的方法是调用别人的接口. 我采用的方法如下: < ...