縮放在CSS中的漸變背景

我想爲使用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 */

來源

2013-01-15 Tom Ward

看起來像它適合我嗎？ http://jsfiddle.net/5vzmE/ – mrtsherman

當您使用height:100%;有時會發生此問題。因爲它意味着填充100％的瀏覽器窗口，所以它不會填滿剩下的部分，因爲這會超過100％。

嘗試調整它有點像這樣寫的：

html 
{ 
    min-height: 100%; 
}

現在，它可以填補過去的100％，所以應該填充背景的其餘部分。

來源

2013-01-15 03:59:03 Jason

縮放在CSS中的漸變背景

回答

相關問題