实现代码：

<!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. shell实现两个数的相加

    刚开始的时候写,一直写不对:看似简单的功能,但是一定要小心:函数的定义: funciton functionName {.....}在functionName和{之间一定有空格啊! 我就是没加空格,就 ...

  2. python 模块的介绍（一）

    模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 简单地说,模块就是一个保存了 ...

  3. html特殊符号

    1                     ´ ´ © © > > µ µ ® ® & & ° ° ¡ ¡     » » ¦ ¦ ÷ ÷ ¿ ¿ ¬ ¬ § § • • ...

  4. 安装vmall5：从ebak恢复数据，需要配置php.ini

    上传vmall5源码到服务器后访问ebak目录,发现网页不显示.用xshell登录到服务器手动执行ebak/index.php查看输出,发现这样一个错误: PHP Parse Error: synta ...

  5. 警告 “util.NativeCodeLoader: Unable to load native-hadoop library for your platform”

    http://blog.csdn.net/sagaryu/article/details/52137989 我的是2.6.4,用上面链接提供的编译好的资源覆盖原来的就好了. 不管也没事. 就是因为系统 ...

  6. VS中的代码段功能

    1.前言 开发人员不喜欢打字.如果你希望提高开发人员的生产力,减少键入的数量,这也同时减少打字稿的数量以及因此产生的编译器错误,这些都极大分散了开发人员的注意力.代码重用是开发人员收集代码的另一个原因 ...

  7. BZOJ1178 [Apio2009]CONVENTION会议中心

    本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转载请注明出处,侵权必究,保留最终解释权! Description Siruseri政府建造了 ...

  8. 树状数组求第k小的元素

    int find_kth(int k) { int ans = 0,cnt = 0; for (int i = 20;i >= 0;i--) //这里的20适当的取值,与MAX_VAL有关,一般 ...

  9. CF 701B Cells Not Under Attack（想法题）

    题目链接: 传送门 Cells Not Under Attack time limit per test:2 second     memory limit per test:256 megabyte ...

  10. 【Alpha版本】冲刺-Day4

    队伍:606notconnected 会议时间:11月12日 会议总结 张斯巍(433) 今天安排:图片查看界面设计 完成度:40% 明天计划:设置界面设计 遇到的问题:校运会比赛时间不够 感想:因为 ...