如何使內容在接近溢出邊緣時緩慢「淡出」：隱藏div？

我希望我不會讓任何人困惑。我的div的高度爲300px，內容大於div。我已經在div中設置了overflow到hidden，並且一切都很順利。只是當用戶滾動內容時，頁面底部的任何內容都不會在某個點後消失，我希望這可能是頂部和底部的半透明圖像的div，這樣當用戶滾動時，內容會慢慢消失，並進入。如何使內容在接近溢出邊緣時緩慢「淡出」：隱藏div？

正如我所說的，希望我不會混淆任何人。

來源

2012-10-02 think123

你只需要與律透明PNG梯度圖像的頂部和你需要使用固定位置，'底部：0像素;'和它的完成 –

我以前做過類似的事情。不幸的是，此時的代碼不在我身邊。

不過，我沒有使用這個網站作爲參考，或許可以幫助你： http://css-tricks.com/examples/FadeOutBottom/

來源

2012-10-02 06:43:50 Albert

這是一個好的開始，但要確保留出足夠的空間，以便文本的最後一行沒有淡入淡出的圖像。使文本難以閱讀。 – sarcastyx

是的，只是爲了澄清，因爲我不得不閱讀該評論兩次才能理解。 @sarcastyx的意思是，當你到達div中文本的末尾時，文本的最後一部分不會落在該淡化圖像下。這可以通過在最後一行之後添加一些換行符來實現。 – Albert

感謝澄清這一點。再次閱讀評論後，我發現它也令人困惑。另外，我不會添加'br'標籤，而是使用'padding-bottom'將文本向上移動。 – sarcastyx

如何使內容在接近溢出邊緣時緩慢「淡出」：隱藏div？

回答

相關問題