CSS中的線性漸變不能垂直重複

我在背景線性漸變重複過去內容區域的末尾時遇到問題。我嘗試過重複 - 並重復，我不知道還有什麼要做。這裏的輸出看起來像一個預覽：http://jsfiddle.net/derbyshirehayes/ZhsQH/CSS中的線性漸變不能垂直重複

HTML代碼：

<html> 
<head> 
<title>hiii582</title> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 

<body> 
    <div id="gradient_background">`` 
    <div id="wrap"> 
    <div id="padding1"></div> 
    <div id="header"> 
     <img src="images/header.png"/> 
    </div> 
    <div id="padding1"></div> 
    <div id="navigation_bar"> 
     <img src="images/navigation_bar.png"/> 
    </div> 
    <div id="padding"></div> 
    <div id="content_area"> 
     <img src="images/content_area.png"/> 
    </div> 
    <div id="padding"></div> 
    </div> 
    </div> 
</body> 
</html>

CSS代碼：

body { 
    margin: 0px; 
    padding: 0px; 
} 

#wrap { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#gradient_background { 
    background-image: -webkit-linear-gradient(top, #8c9bb2 0%, #5b8fdf 100%); 
    background-repeat: repeat-y; 
} 

#header { 
    width: 900px; 
    height: 100px; 
    background-image: url('images/header.png'); 
    background-repeat: no-repeat; 

} 

#navigation_bar { 
    width: 901px; 
    height: 36px; 
    background-image: url('images/navigation_bar.png'); 
    background-repeat: no-repeat; 

} 
/* Padding between navigation bar and content */ 
#padding { 
    padding: 10px; 
} 

#padding1 { 
    padding: 5px; 
} 
#content_area { 
    width: 899px; 
    height: 404px; 
    background-image: url('images/content_area.png'); 
    background-repeat: no-repeat; 

}

來源

2013-09-28 Hayes Derbyshire

您的問題有點困惑......您是否希望將漸變應用於#content_area？ –

不，我希望它被應用到我的網站的背景。但它只會下降，直到它到達內容區域 –

你需要給你的HTML 100％高度：

html{ 
    height: 100%; 
}

因爲身體看着它的父母的高度（html）你可以看看這個fiddle。我用不同的顏色繪製所有div，以便更好地區分它們

來源

2013-09-29 05:45:26

CSS中的線性漸變不能垂直重複

回答

相關問題