第一次询问,请放轻松我
我正在尝试为使用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 */
答案 0 :(得分:2)
使用height:100%;
时,有时会出现此问题。因为它意味着填充100%的浏览器窗口,所以它不会填满其余部分,因为这将超过100%。
尝试稍微调整一下并按如下方式编写:
html
{
min-height: 100%;
}
现在它可以填满100%所以它应该填补剩下的背景。