如何CSS实现网页背景三种颜色渐变效果？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何CSS实现网页背景三种颜色渐变效果？相关的知识，希望对你有一定的参考价值。
页面背景颜色渐变可以分为四个部分
一、从上往下渐变：
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
二、从左上至右下渐变：
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
三、从左往右渐变：
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
四、从上往下渐变：
下面是整合的完整格式：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>背景渐变</title>
<style type="text/css">
<!--
body
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
-->
</style></head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="600" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"> </td>
</tr>
</table>
</body>
</html>
如果是在同一个页面里面显示多重渐变效果，可以定义每个渐变的width和height。
background-image：<bg-image> [ , <bg-image> ]
<bg-image> = <image> | none
默认值：none
适用于：所有元素
继承性：无
动画性：否
计算值：指定值
取值：
none：无背景图。
<image>：使用绝对或相对地址指或者创建渐变色来确定图像。
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。 参考技术C 如果是用纯css实现的话，ie下用fliter:alpha滤镜，ff和chrome用gradient实现。文章比较多，随便百度就可以了。http://www.zhangxinxu.com/wordpress/2010/04/css%E5%AE%9E%E7%8E%B0%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AFgradient%E6%95%88%E6%9E%9C/
可以看看张鑫旭大神写的博文。
还有一种方法，竖向渐变的话用ps做一张1px宽、高度很高的三色渐变图，作为背景repeat-x就可以了。不过这种方法不适合于横向渐变，而且对高度也有一定要求。 参考技术D 纯css是静态的不可能实现渐变什么的，必须用javascript或jQuery之类的
我用jQuery
http://www.phpstudy.net/e/tiy/ii.php?q=jquery_effect_toggle_function
这是w3c的那个实例，我也做过现在找不到了，抱歉了
怎么设计css网页背景颜色过渡?
请给出完整代码！谢谢！
CSS实现渐变背景效果兼容主流浏览器IE浏览器下渐变背景的使用需要使用IE的渐变滤镜filter
对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性 为-moz-linear-gradient属性
对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法为-webkit-gradient
代码如下：
.gradient
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE*/
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); /*Firefox*/
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); /*Chrome/Safari*/
<div class="gradient"></div> 参考技术A 如果想做的真正的颜色过渡兼容性比较好，还是切一个宽1像素的图片，做背景，然后平铺效果最好。纯代码实现复杂而且兼容性不是很好。 参考技术B 用一张背景图片,在背景图片中实现过渡效果,然后用CSS添加上去就是了.
如:
body
background: #78BCE8 url(/images/background.gif);
参考技术C .hbar FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#25323A',endColorStr='#6E706D');
.vbar FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#25323A',endColorStr='#6E706D'); 参考技术D 纯CSS实现，只能用图片代替
以上是关于如何CSS实现网页背景三种颜色渐变效果？的主要内容，如果未能解决你的问题，请参考以下文章