解決css漸變色只能渲染一屏大小方法

阿新 • • 發佈：2019-01-05

background: linear-gradient( #404a59,#0f1319);

css背景色可以設定漸變樣式，但是這個漸變色只能渲染一屏的大小，超出一屏後會再次渲染比如下圖

渲染一屏

上面這個圖是開啟頁面之後剛好是渲染了一屏的漸變色，但是，當把頁面往下拉之後

頁面因為超出一屏之後再次渲染了顏色！
解決方法在body內包一個div，這個div包含所有內容結構，並新增漸變屬性，我給body也加了一個深色背景，因為開發中總會有一些意外導致多屏的漸變渲染（最好不要出現這種情況-_-!）

程式碼是這樣的

<!DOCTYPE html>
<html lang="en" 
>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: #0f1319;
        }
        div{
            width 
: 100%;
            height: 1300px;
            background: linear-gradient( #404a59,#0f1319);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

總結：
1.漸變色屬性不要加給body
2.body內最好包一個父級的div，給這個div加上漸變屬性即可，
3.有時候會出現結構不是很清晰的情況，比如浮動，position等影響結構的屬性導致頁面出現兩屏或多屏的漸變色渲染，最好給body加上一個深色背景，防止出現色差!

解決css漸變色只能渲染一屏大小方法

解決css漸變色只能渲染一屏大小方法

CSS漸變色邊框，解決border設定漸變後，border-radius無效的問題

解決Request和Response只能獲取一次的問題

css-漸變色-1.1

css漸變色背景

痞子衡嵌入式：記錄i.MXRT1060驅動LCD屏顯示橫向漸變色有亮點問題解決全過程（解答篇）

InputStream只能讀取一次的解決辦法 C# byte[] 和Stream轉換

解決HttpServletRequest InputStream只能讀取一次問題

UIgradients – 美麗的UI漸變色分享站並可轉成CSS代碼

cocosjs--h5遊戲能正常渲染一點屏幕就黑屏的解決方案

CSS：linear-gradient()漸變色練習筆記

解決Laya釋出匯出QQ玩一玩，替換最新的qqPlayCore.js後黑屏問題

如何用純 CSS 創作一個漸變色動畫邊框

教程：一次性修改整個pdf文件的字型的方法，解決一次只能修改一頁問題

WPF解決 MediaElement 不能暫停，而且只能播放一次

css 邊框漸變色

通過過濾器解決request body的內容，只能去一次的問題

Android RecycleView拖拽超過一屏發生閃屏無法拖拽的bug的解決方案

css實現漸變色，從做到右，從上到下

解決HttpServletRequest的輸入流只能讀取一次的問題

解決css漸變色只能渲染一屏大小方法

相關推薦