css如何实现真正的网页渐变背景

html-css013

css如何实现真正的网页渐变背景,第1张

方法:根据浏览者的分辨率自动调用样式表

1、新建两个样式表分别命名为:1024.css800.css(当然有更多分辨率,可以增加样式表)

2、在样式表中分别定义好图片作为网页背景。

3、新建一个网页文件,把下面代码复制过去。

<script language="JavaScript">

<!--

function test(){

var a=screen.width+".css"

//alert(a)

//测试变量a的值

document.getElementById("eric").href =a

}

//-->

</script>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

<link href="" rel="stylesheet" type="text/css" id="eric">

</head>

<body onLoad="test()">

</body>

</html>

搞定!

<style>

table tr{

background-color:#FF0000

}

#aaa{filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=100,finishOpacity=50)}

#bbb{filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=50,finishOpacity=0)}

</style>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">

<div>

<tr>

<td id="aaa">111111</td>

<td id="bbb">222222</td>

</tr>

</div>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

</body>

简单的说应该没有直接的方法能实现这个功能

只能变相实现~~ 如上方法让每个TD渐变 然后只要让颜色衔接上 看起来就像

每个TR颜色渐变了~~

页面背景颜色渐变可以分为四个部分

一、从上往下渐变:

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)">&nbsp</td>

</tr>

</table>

</body>

</html>

如果是在同一个页面里面显示多重渐变效果,可以定义每个渐变的width和height。