网页背景颜色渐变

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页背景颜色渐变相关的知识，希望对你有一定的参考价值。

怎样实现网页背景颜色渐变，滚动条的滚动对背景颜色没有影响

代码如下，复制到txt文件，然后另存为html文件，具体应用看你怎么改了！
<html>
<BASE target=-blank>
<head>

<TITLE></TITLE>

<style>
BODY
SCROLLBAR-FACE-COLOR: #8000FF;
SCROLLBAR-HIGHLIGHT-COLOR: #00FFFF;
SCROLLBAR-SHADOW-COLOR: #0000A0;
SCROLLBAR-3DLIGHT-COLOR: #FF0080;
SCROLLBAR-ARROW-COLOR: #008000;
SCROLLBAR-TRACK-COLOR: #80FFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FF00FF;
SCROLLBAR-BASE-COLOR: #FFFF00;

</style>

</HEAD>

 
 
 
 
 
 
 
 
 
 
 
 
 
 


; &

nbsp; &nb

sp;

; &

nbsp; &nb

sp;

; &

nbsp; &nb

sp; 

<SCRIPT>
var i=0
var i_cell=0
i_bg=0
var linkslist
var bg = new Array('AACC00','77AA00', '557700', '335500', '003300', '000000', '335500', '557700', '77AA00',

'AACC00', 'CCFF00')
function initObjects()
if (document.all)
linkslist = document.all.linkliste.style
linkslist.visibility='VISIBLE'
linkslist.posTop = i
linkslist.posLeft = 3
scrollIE()

if (document.layers)
linkslist = document.linkliste
linkslist.visibility='VISIBLE'
linkslist.top = i
linkslist.left = 3
scrollNN()

function scrollNN()
if (i_cell < 100)
i_cell++
linkslist.top = i--
var timer = setTimeout('scrollNN()',20)

else
clearTimeout('timer')
changebgNN()

function scrollIE()
if (i_cell < 100)
i_cell++
linkslist.posTop = i--
var timer = setTimeout('scrollIE()',20)

else
clearTimeout('timer')
document.bgColor='CCFF00'
changebgIE()

function changebgNN()
if (i_bg <= bg.length)
document.bgColor=bg[i_bg]
i_bg++
var bgagain = setTimeout('changebgNN()',20)

else
clearTimeout('bgagain')
document.bgColor='CCFF00'
i_bg=0
makepauseNN()

function changebgIE()
if (i_bg <= bg.length)
document.bgColor=bg[i_bg]
i_bg++
var bgagain = setTimeout('changebgIE()',50)

else
clearTimeout('bgagain')
i_bg=0
makepauseIE()

function makepauseNN()

if (i < (-1*1700))

i=0

i_cell=0
var scrollagain = setTimeout('scrollNN()',3000)

function makepauseIE()
if (i < (-1*1700))
i=0

i_cell=0
var scrollagain = setTimeout('scrollIE()',3000)

</SCRIPT>

<STYLE>.alldiv
POSITION: absolute; VISIBILITY: hidden

</STYLE>

</head>

<a href=http://rtcnet.vicp.net>

<body onload=initObjects() onUnload="window.alert('容天谢谢你的光临!欢迎下次再来!')">

<DIV class=alldiv id=linkliste>

容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
容天谢谢你的光临!欢迎下次再来!
</body>
</html> 参考技术A 方式有两种，可以使用 CSS+图片或 CSS+滤镜实现，比如使用IE浏览器的Gradient 滤镜实现两个颜色（#FFFFFF/#3568CC）的渐变：

<body style="filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0')">
</body> 参考技术B 不好意思，我不会哦。。。本回答被提问者采纳

div背景颜色怎样渐变 css实现div层背景颜色渐变代码

借助background-position实现渐变过渡

background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。

实现效果如下（鼠标hover）：

借助background-color实现渐变过渡

background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。

鼠标hover前后效果对比：

借助伪元素和opacity实现渐变过渡

借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。

下图为hover之后的效果：