2

第一次问，请对我放轻松

我正在尝试为使用 JQuery Mobile 的 Web 应用程序制作背景渐变。一般来说，我对 CSS 和 UI 设计一无所知。

我希望渐变填充整个页面的空间。现在，它会填满原始窗口的大小，但向下滚动时会“切断”。

大多数建议都指向这一点：

html 
{
  height: 100%;
}

...这对我不起作用。这是我所拥有的：

content: " ";
width: 100%;
height: 100%;
float: left;
position: relative;
z-index: -1;
top: 0;
left: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0.5) 100%) fixed;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.5))) fixed;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%)fixed;
 background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;     background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
 background: linear-gradient(135deg, rgba(0,0,0,1) 40%,rgba(0,0,0,0.5) 100%) fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
4

1 回答 1

4

当您使用height:100%;. 因为这意味着填充 100% 的浏览器窗口，所以它不会填充其余部分，因为那将超过 100%。

试着稍微调整一下，然后这样写：

html 
{
  min-height: 100%;
}

现在它可以填充超过 100%，所以它应该填充背景的其余部分。

于 2013-01-15T03:59:03.370 回答