如何讓漸變背景填充整個頁面？

我想有一個漸變背景填充整個頁面/正文。這是我嘗試過的。它可以工作，但在滾動後它不會伸展到頁面的整個高度。如何讓漸變背景填充整個頁面？

body { 
    width: 100%; 
    height: 100%; 
    background: #034b52 url(../../themes/images/bg.jpg) no-repeat center fixed; 
    color: #fff; 
} 

body:after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    background: linear-gradient(to bottom, rgba(3, 75, 82, 1) 0%, rgba(3, 75, 82, 0) 100%); 
    content: ''; 
    z-index: -1; 
}

來源

2016-09-05 Stack Over

http://stackoverflow.com/questions/18094134/fixed-gradient-background -with-css使用background-attachment：fixed;在身體標記和應用背景身體標記 – abhirathore2006

-1

試試這個

body{ 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue); 
 
height:100%; 
 
    
 
} 
 
html{height:100%;}

<body> 
 
here we go 
 
</body>

來源

2016-09-05 10:45:01

應用下面的CSS：

body { 
    background: linear-gradient(to bottom, rgba(3,75, 82, 1) 0%, rgba(3,75, 82, 0) 100%); 
    height: 100%; 
    margin: 0; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

來源

2016-09-06 08:55:20 Anuj

如何讓漸變背景填充整個頁面？

回答

相關問題