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

WEB设计综合
meta标签之详解
css布局中的居中问题
CSS的十八般技巧
_blank开新窗口不符合标准?
如何以及何时使用sIFR
左中右3栏布局中最先显示中栏内容的方法
用CSS定义标题的几个实例
CSS闭合浮动元素
CSS常用小技巧
用CSS实现网页的绝对居中
HTML rel 属性
css高级布局技巧
div+css布局时应注意的几个浏览器兼容性问题
font-size的控制
margin优化的一种思路
常用CSS缩写语法总结
25种能改善并提高网站浏览量的方法
display:inline-block的深入理解
批量消除网页连接上的“虚线框”
在网页设计中颜色的重要性

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 1474 ::
收藏到网摘: 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

登陆 | 还没注册?