网页图片渐变代码（渐变图片素材）

本篇文章给大家谈谈网页图片渐变代码，以及渐变图片素材对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、网页背景颜色渐变代码
• 2、如何设置web背景渐变效果?
• 3、网站渐变色代码怎么写
• 4、求整个网页背景渐变代码

网页背景颜色渐变代码

方式有两种，可以使用 CSS+图片 或 CSS+滤镜 实现，比如使用IE浏览器的Gradient 滤镜实现两个颜色（#FFFFFF/#3568CC）的渐变：

body style="filter:progid:DXImageTransform.Microsoft.Gradient

(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0')"

/body

如何设置web背景渐变效果?

网页产生渐变效果不一定非要什么FLASH其实原理非常简单，META标签中就带有动态滤镜的功能。本站的这种效果其实就是用了meta标签而没有做其他任何修改。

你可以把以下这两段加到你的HTML的META头中，再看看效果：-）

Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"

Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)"

blendTrans其实就是一种动态滤镜效果，当然还有其他的方法也可以产生这种动态滤镜效果

Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)"

Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)"

Duration表示滤镜特效的持续时间(单位：秒)

Transition　滤镜类型。表示使用哪种特效，取值为0-23。

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

Tags: 资料存档, 有意思

网站渐变色代码怎么写

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。

第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。

第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。

第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

求整个网页背景渐变代码

背景一:

SCRIPT LANGUAGE="JavaScript"

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";

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);

}

}

/SCRIPT

body onLoad="fadeIn(16)"

背景二:

!-- Begin

var Clrs = new Array(9);

Clrs[0] = 'ff0000';

Clrs[1] = '00ff00';

Clrs[2] = '000aff';

Clrs[3] = 'ff00ff';

Clrs[4] = 'ffa500';

Clrs[5] = 'ffff00';

Clrs[6] = '00ff00';

Clrs[7] = 'ffffff';

Clrs[8] = 'fffff0';

var sClrs = new Array(5);

sClrs[0] = 'ffa500';

sClrs[1] = '55ff66';

sClrs[2] = 'AC9DFC';

sClrs[3] = 'fff000';

sClrs[4] = 'fffff0';

var yBase;

var xBase;

var step;

var currStep = 0;

var Xpos = 1;

var Ypos = 1;

var initialStarColor = 'ffa000';

var Mtop = 250;

var Mleft = 250;

function Fireworks() {

if (document.all) {

yBase = window.document.body.offsetHeight / 3;

xBase = window.document.body.offsetWidth / 8;

}

else if (document.layers) {

yBase = window.innerHeight / 3;

xBase = window.innerWidth / 8;

}

if (document.all) {

step = 5;

for ( i = 0 ; i starsDiv.all.length ; i++ ) {

for (ai = 0; ai Clrs.length; ai++) {

var c = Math.round(Math.random()*[ai]);

}

if (currStep 90)

starsDiv.all[i].style.background=initialStarColor;

if (currStep 90)

starsDiv.all[i].style.background=Clrs[c];

starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)

starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)

}

}

else if (document.layers) {

step = 5;

for ( j = 0 ; j 24 ; j++ ) { //number of NS layers!

var templayer = "a"+j;

for (ai = 0; ai Clrs.length; ai++) {

var c = Math.round(Math.random()*[ai]);

}

if (currStep 90)

document.layers[templayer].bgColor=initialStarColor;

if (currStep 90)

document.layers[templayer].bgColor=Clrs[c];

document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)

document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)

}

}

currStep+= step;

T=setTimeout("Fireworks()",5);

if (currStep == 220) {

currStep = -10;

for (n = 0; n sClrs.length; n++) {

var k = Math.round(Math.random()*n);

}

initialStarColor = sClrs[k];

if (document.all) {

Dtop = window.document.body.clientHeight - 250;

Dleft = xBase * 3.5;

Mtop = Math.round(Math.random()*Dtop);

Mleft = Math.round(Math.random()*Dleft);

document.all.starsDiv.style.top = Mtop+document.body.scrollTop;

document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;

}

else if (document.layers) {

Dleft = window.innerWidth - 100;

Dtop = window.innerHeight - 100;

Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);

Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);

document.layers[templayer].top = Mtop;

document.layers[templayer].left = Mleft;

}

if ((Mtop 20) || (Mleft 20)) {

Mtop += 90;

Mleft += 90;

}

}

}

Fireworks();

// End --

/script

关于网页图片渐变代码和渐变图片素材的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。