动画渐变 (javascript) 背景不会扩展到 window 的全高

Question

我的网站上有一个动画渐变背景 div。但是，每当我尝试将 css 样式应用于“100%”或 "background: cover" 等高度时，它就会到达任何 window 的底部，渐变只是停止运作。它似乎只喜欢使用低调的像素高度来设计样式，这并不理想。下面是我的 css 和 html。关于如何让梯度缩放以适应 windows 而不是只是一个谨慎的长度，有什么想法吗？我将它设置为 width:100%，它在那个方向上完美运行，所以我很难过！ Link: 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>

Answer 1

为您的 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 */

}

Answer 2

我相信您可以通过将梯度 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...

动画渐变 (javascript) 背景不会扩展到 window 的全高

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

javascript

css

jquery

linear-gradients

HTML

CSS

JavaScript