CSS：在div結尾之前的指定像素數之後結束背景線性漸變

我一直在嘗試從頂部到底部linear-gradient來了解我正在製作的頁面的背景。唯一的問題是頁面上有一個頁腳，我想在div結束之前結束漸變。CSS：在div結尾之前的指定像素數之後結束背景線性漸變

這是可能在CSS中，或者應該改變HTML以創建一個div在頁腳開始之前結束？或者應該jQuery計算頁腳開始的百分比？

這些頁面的長度都不相同，因此以百分比結尾不適用於所有頁面。一個線性漸變可以結束，比如在div結束之前說500px？

我的代碼在這裏，包裝div擴展爲頁面的整個寬度。

div#wrapper { 
background: #ffdf96; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffdf96 0%, #a67f25 50%, #000 60%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf96), color-stop(50%,#a67f25), color-stop(60%,#000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffdf96 0%,#a67f25 50%,#000 60%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdf96', endColorstr='#a67f25',GradientType=0); /* IE6-9 */ 
}

在上下文中的頁面是在這裏：http://bit.ly/1ar6KuR

的任何幫助，你可以給:-)

來源

2013-09-26 user2761030

爲什麼不扭轉漸變色站，並從頂部扭轉方向非常感謝 - >底部到底部 - >頂部，並具有所需像素值的第一個顏色停止。

Codepen Example

還是我這個得太多？

來源

2013-09-26 11:32:24

也許最好的辦法是增加：僞類前和應用梯度，像：

#wrapper:before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 60%; 
    content: ""; 
    ... and background here ... 
}

或DIV中#wrapper指定爲第一個孩子有相同的CSS設置。

來源

2013-09-26 11:36:06

謝謝你，這是一個有用的想法。最後，我將漸變代碼添加到'.wrapper-holder'中，並將此框的高度設置爲使用jQuery在所有頁面上的頁腳的正上方。 – user2761030

CSS：在div結尾之前的指定像素數之後結束背景線性漸變

回答

相關問題