当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > 制作网页中的渐变背景

WEB设计综合
连接基础
HTML基础
CSS 基础
添加背景音乐
HTML中的脚本标签
水平线样式
CSS基础以及CSS代码
自定义404错误页
链接至外部样式表
文本和颜色
表格详述
图像详述
优化CSS样式表代码
CSS元素div ul dl dt ol简释
CSS元素的class与ID命名常用关键字
DIV布局SEO的影响
CSS中的相对定位与绝对定位
CSS选择符
CSS特殊选择符伪类的应用技巧
常用的CSS知识

WEB设计综合 中的 制作网页中的渐变背景


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1467 ::
收藏到网摘: n/a

方法一:

用图实现

1切一张1*760的渐变背景图
2在dw中添加做背景

方法二:

用css实现,代码如下:

<html>
<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)">
<center>
<font size="+3"><strong>网页背景色渐变<br>
(从白色到黑色) </strong></font> <br>
<br>
</center>
</body>
</html>


下面这个是斜角渐变啊

<html>
<body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue">
<h1>背景渐变(左上至右下)</h1>
</body>
</html>

很COOL的哦!

方法三:

用javascript实现

<SCRIPT LANGUAGE="javascript">

<!-- Hide from old browsers
var Color= new Array(9);
Color[1] = "ff";
Color[2] = "ee";
Color[3] = "dd";
Color[4] = "cc";
Color[5] = "bb";
Color[6] = "aa";
Color[7] = "99";
Color[8] = "88";
Color[9] = "77";
Color[10] = "66";
Color[11] = "55";
Color[12] = "44";
Color[13] = "33";
Color[14] = "22";
Color[15] = "11";
Color[16] = "00";

/* Do not display text on a fading background. Instead, let it
fade in and out once or twice, then load a new page. */

function fadeIn(where) {
if (where >= 1) {
document.bgColor="#" + Color[where] +"0000";
where -= 1;
setTimeout("fadeIn("+where+")", 15);
} else {
setTimeout('fadeOut(1)', 15);
}
}

function fadeOut(where) {
if (where <=16) {
document.bgColor="#" + Color[where] +"0000";
where += 1;
setTimeout("fadeOut("+where+")", 15)
} else {
setTimeout("fadeIn(16)", 15);
// window.location.href="http://www.moontoucher.net";
}
}

// Unhide -->

</SCRIPT>

<body bgcolor="#fef4d9" onLoad="fadeIn(16)">

评论 (0) All

登陆 | 还没注册?