实现代码：

<!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. MVC3缓存之一：使用页面缓存

    MVC3缓存之一:使用页面缓存 在MVC3中要如果要启用页面缓存,在页面对应的Action前面加上一个OutputCache属性即可. 我们建一个Demo来测试一下,在此Demo中,在View的Hom ...

  2. JS 正则表达式中的特殊字符

    正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个 ...

  3. 【POJ 3525】Most Distant Point from the Sea(直线平移、半平面交)

    按逆时针顺序给出n个点,求它们组成的多边形的最大内切圆半径. 二分这个半径,将所有直线向多边形中心平移r距离,如果半平面交不存在那么r大了,否则r小了. 平移直线就是对于向量ab,因为是逆时针的,向中 ...

  4. 精通Web Analytics 2.0 （3） 第一章：网站分析的新奇世界

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第一章:Web Analytics 2.0的新奇世界 多年以来,我们很清楚的知道,网站分析能够真正的改革网络上业务的完成方式.那 ...

  5. 任意List 和DatabTable的转换

     public static IEnumerable<T> ToEntityList<T>(this DataTable table) where T : class      ...

  6. Android四大组件

    Activity 概念 活动是一种可以包含用户界面的组件,主要用于和用户交互.一个应用程序可以包含零个或多个活动. 基本用法 手动创建活动 1. 创建或加载布局 2. 在AndroidManifest ...

  7. Session对象

    Session对象用于存储在多个页面调用之间特定用户的信息.Session对象只针对单一网站使用者,不同的客户端无法互相访问.Session对象中止于联机机器离线时,也就是当网站使用者关掉浏览器或超过 ...

  8. AngularJs $q 承诺与延迟

    $q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式- ...

  9. ECMAScript严格模式简介

    写在前面 大家都知道使用"use strict"表示使用ECMAScript进行严格模式,使用"use strict"有两种方式 在文件头部写上它(使得整个脚本 ...

  10. linux系统性能监视命令

    preface as a linux engineer,you should know how to use these command of monitor system,so let's lear ...