如何CSS实现网页背景三种颜色渐变效果？
6个回答
展开全部
页面背景颜色渐变可以分为四个部分
一、从上往下渐变：
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变：
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、从左往右渐变：
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变：
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
下面是整合的完整格式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
这是区块背景，不是页面的背景，而且中间那个渐变应该是一张图片，而其他的颜色就应该是背景色填充，现虽然css3可以支持多个背景，和很强大的滤镜功能，但目前很多主流浏览器不支持css3所以不可能是单纯的css生存的。 补充： 你不信的话，可以点击查看背景图片。 追问： 图片当然可以轻易实现，可我想知道如何用CSS实现简单的渐变，两种颜色就好，让我知道它的原理和方法。 回答： css实现渐变？只在safari浏览器上有效，别的基本都不支持。
我想你应该是想这样子吧，用ps之类的软件做好一个渐变取1-2个像素的宽度保存为一张图片，然后用css写如下的规则。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在background-image属性中使用linear-gradient（）。
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>：
用百分比指定起止色位置。
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>：
用百分比指定起止色位置。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果是用纯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就可以了。不过这种方法不适合于横向渐变，而且对高度也有一定要求。
可以看看张鑫旭大神写的博文。
还有一种方法，竖向渐变的话用ps做一张1px宽、高度很高的三色渐变图，作为背景repeat-x就可以了。不过这种方法不适合于横向渐变，而且对高度也有一定要求。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯css是静态的不可能实现渐变什么的，必须用JavaScript或jQuery之类的
我用jQuery
http://www.phpstudy.net/e/tiy/ii.php?q=jquery_effect_toggle_function
这是w3c的那个实例，我也做过现在找不到了，抱歉了
我用jQuery
http://www.phpstudy.net/e/tiy/ii.php?q=jquery_effect_toggle_function
这是w3c的那个实例，我也做过现在找不到了，抱歉了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
