动画渐变(javascript）背景不会延伸到窗口的整个高度

animated gradient (javascript) background will not extend to full height of window

本文关键字：窗口 高度 渐变 javascript 背景 动画      更新时间：2024-04-14

我的网站上有一个动画渐变作为背景div。然而，每当我试图将css样式应用于HEIGHT，如"100%"或"background:cover"等，以便它到达任何窗口的底部时，渐变就会停止工作。它似乎只喜欢采用谨慎的像素高度，这并不理想。下面是我的css和html。关于如何使梯度按比例缩放以适合窗户，而不是只有一个离散的长度，有什么想法吗？我把它设置为宽度：100%，在这个方向上完美发挥作用，所以我被难住了！链接：http://studiopowell.net/TEST_gradient.html

#gradient
{
  width: 100%;
  height: 1200px;
  padding: 0px;
  margin: 0px;
  opacity: 0.1;
  margin-top: -850px;
  position: relative;
  z-index: 10;
}
</head>
<body>
<div class="titles"><img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br /><br />M I C H A E L &nbsp; P O W E L L<br /><br /></div>
<a class="fancybox" rel="group" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>
<div id="gradient"> 
</div>

</body>
</html>

我相信你可以通过定位文档其他部分上方的梯度div，并使用position:absolute作为他的评论中提到的@blex来解决你的问题：

http://jsfiddle.net/qj1nz13p/

HTML

<div id="gradient">
</div>
<div class="titles">
    <img src="archive-icon.png" width="185" height="185" alt="studio powell michael powell studiopowell art artist books installation video" /><br/><br/>
    M I C H A E L &nbsp; P O W E L L<br/><br/>
</div>
<a class="fancybox" rel="group" href="archive-icon.png"><img src="ruby ball.jpg" alt="" width="200" /></a>

CSS

body {
    padding:0;
    margin:0;
}
#gradient {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    opacity: 0.1;
    position:absolute;
    z-index: -99999;
}

JavaScript

var colors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.0004;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);// JavaScript Document

此外，我将z-index从10更改为-99999；渐变背景应该是所有东西下面的，对吧？不确定为什么你有10…

将样式应用于HTML标记：http://jsfiddle.net/n6xnsv34/

html{
  height:100%;
  width: 100%;
  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */
}
相关文章：