实现代码：

<!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. iOS开发----音频播放、录音、视频播放、拍照、视频录制

    随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像头的操 ...

  2. Input path does not exist: file:/.......

    注意看是file不存在并不是hdfs,好奇怪,突然明白应该是路径不对,必须加上hdfs://hostname:port/file. 我为什么饭这样的错误是因为前一阵谢了HDFS的曹组,谢了全局File ...

  3. 【poj1017】 Packets

    http://poj.org/problem?id=1017 (题目链接) 题意 一个工厂制造的产品形状都是长方体盒子,它们的高度都是 h,长和宽都相等,一共有六个型号,分别为1*1, 2*2, 3* ...

  4. 【bzoj3991】 寻宝游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=3991 (题目链接) 题意 给出一个n个节点的带权树,m次操作每次修改一个关键点,求每次操作后,从其中 ...

  5. phpweb /version.php Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link:2. 漏洞触发条件3. 漏洞影响范围4. 漏 ...

  6. How to Prevent Cross-Site Scripting Attacks

    How to Prevent Cross-Site Scripting Attacks Reference From: http://resources.infosecinstitute.com/ho ...

  7. 第一个有点作用的PHP扩展

    C/C++去开发PHP扩展 我觉的对于PHP开发人员来说,学的东西非常杂,也非常多,当然了开发PHP扩展也是一个必须要掌握的技能,这里膜拜下大神鸟哥(Laruence)~ 今天要开发的第一个有点功能的 ...

  8. ofo走出校园观察：市场定位导致产品错位？

    Ofo和摩拜单车虽然同样都是做单车共享,但实际上两者在最初的市场定位是有明显的差异的,因此提供的产品方案也存在巨大的差异. 市场定位不同,导致产品方案的巨大差异 摩拜单车一开始就定位于开放市场,充分的 ...

  9. （原）list中null的谨慎使用

    今天在刷算法题时,新建了ArrayList变量,发现ArrayList与null结合起来使用时经常出错. 请查看如下几种例子, 1.new一个ArrayList<>类型的数据, impor ...

  10. Java多线程问题总结

    前言 Java多线程分类中写了21篇多线程的文章,21篇文章的内容很多,个人认为,学习,内容越多.越杂的知识,越需要进行深刻的总结,这样才能记忆深刻,将知识变成自己的.这篇文章主要是对多线程的问题进行 ...