应用错误收集

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

时间：2015-02-22 21:28:47

标签： javascript jquery css linear-gradients

我的网站上有一个动画渐变作为背景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>

2 个答案:

答案 0 :(得分：1)

我相信您可以通过在文档的其余部分找到渐变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 ...

答案 1 :(得分：0)

将样式应用于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 */

}