jQuery的移動和CSS固定漸變每頁相同

我有幾個頁面，我使用漸變作爲背景和頁腳匹配底部漸變顏色。因此，我有第二頁比儀表板頁面長，頁腳不匹配顏色。我想爲每個頁面設置一個靜態漸變。jQuery的移動和CSS固定漸變每頁相同

正如你可以看到

這是我的風格背景：

.background { 
    background-image: -webkit-linear-gradient(#00cef4,#00a0e5); 
    background-repeat:repeat-x; 
    background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
}

，這是頁腳的造型：

.ui-footer { 
    background-image: linear-gradient(#00a6e7, #00a0e5); 
    border-color: transparent !important 
} 

.footer a:after { 
    background-color: transparent !important; 
    /*border-color: transparent !important;*/ 
    height: 70px; 
} 

.ui-footer, .footer, .footer li, .footer a { 
    height: 70px; 
}

來源

2016-12-01 Sreinieren

開始從底部梯度... simples！ –

@Harry這會導致頁腳下方的內容在您滾動頁面時流血。 @Beginnerprogrammer你嘗試過'background-attachment：fixed'嗎？或者用100vw 100vh（100％屏幕寬度，100％屏幕高度）調整背景大小？ –

@哈里，這是不明顯的工作，因爲圖標將被放置在內容的前面，沒有不可讀的背景。 – Sreinieren

你可以試試這個。
2個部分分開視：

HTML：

<body> 
    <div class="content">everything goes here</div> 
    <div class="footer">buttons go here </div> 
</body>

CSS：

.content{ 
    height: 100vh; /* full display size */ 
    overflow-y: auto; /* everything bigger will scroll like normal */ 
    padding-bottom: 45px; /* Whatever height you give the icon section */ 
    box-sizing: border-box; /* this + the padding will make sure your content stops extactly where the footer sta */ 
} 
.footer{ 
    position: absolute; 
    bottom: 0; 
    height: 45px; 
} 
body{ 
    /* gradient stuff here */ 
}

來源

2016-12-01 16:29:29

-1

顏色不匹配是不是因爲主要部分的高度&頁腳 - 這部分是很好的方式，你已經做到了。

你的主要問題是爲了你的漸變色 - 漸變的顏色順序不匹配非常精確。

說明：

目前您的訂單是

lightest - color 1 - main start 
... 
..darker.. 
..darker.. 
.. 
darkest - color 2 - main end 
lighter - color1 - footer start(this is the mismatch - this should be the same color as the last(darkest)) 
..darker.. 
..darker.. 
darkest - color 2 - footer end

因此，正確的順序應該是（下同）

lightest - color 1 - main start 
... 
..darker.. 
..darker.. 
.. 
darkest - color 2 - main end 
darkest - color2 - footer start 
..even more darker.. 
..even more darker.. 
darkest - color 3 - footer end

解決方案

菊st 交換頁腳的漸變顏色以匹配。像這樣

.ui-footer { 
    background-image: linear-gradient(#00a0e5, #00a6e7); //colors swapped to match main sections color 
    border-color: transparent !important 
}

來源

2016-12-01 16:28:21

jQuery的移動和CSS固定漸變每頁相同

回答

相關問題