实现代码：

<!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. 【USACO 2.2】Preface Numbering (找规律)

    求 1-n 的所有罗马数字表达中,出现过的每个字母的个数. 分别对每个数的罗马表达式计算每个字母个数. 对于十进制的每一位,都是一样的规则,只是代表的字母不同. 于是我们从最后一位往前考虑,当前位由字 ...

  2. 使用redis避免客户端频繁提交数据

    避免客户端频繁向服务器提交表单的解决方案 使用redis 在order的model中增加函数 ) { try{ $key = "lock_" . $key; $num = $thi ...

  3. 【uoj149】 NOIP2015—子串

    http://uoj.ac/problem/149 (题目链接) 题意 给出两个字符串A.B,问从A中取出k个互不重叠的子串按顺序组成B的方案数. Solution 一看这种题目就是字符串dp,字符串 ...

  4. 【poj3263】 Tallest Cow

    http://poj.org/problem?id=3263 (题目链接) 题意 n头奶牛排成一排,最高的一头I身高H,给出R个条件(a,b),表示a,b之间的奶牛都要比a矮,b的身高大于等于a.求每 ...

  5. Jenkins企业版与CloudBees

    Jenkins企业版由CloudBess提供! 参考 https://www.cloudbees.com/ http://www.infoq.com/cn/news/2012/01/cloudbees ...

  6. Jenkins配置的邮件无法发送的问题

    一.不要使用系统默认的插件,请使用[Extended E-mail Notification] 二.一下的选项要和你发邮件人填写的保持一致

  7. hihocoder 1347 小h的树上的朋友

    传送门 时间限制:18000ms单点时限:2000ms内存限制:512MB 描述 小h拥有$n$位朋友.每位朋友拥有一个数值$V_i$代表他与小h的亲密度.亲密度有可能发生变化.岁月流逝,小h的朋友们 ...

  8. Sublime Text以及Package Control安装方法

    官方下载:Sublime Text 中国论坛:Sublime 论坛 Sublime Text 是一个代码编辑器,具有漂亮的用户界面和强大的功能,并且它还是一个跨平台的编辑器,同时支持Windows.L ...

  9. django 提示ImportError: cannot import name json_response

    from json_response import JsonResponse, json_response as json_resp 使用的语句如上,其实并不是没有安装,只是需要升级一下 pip in ...

  10. 团队项目UML用例图

    团队项目UML用例图