CSS中的漸變背景不需要的重複

我正在爲網頁創建一個CSS樣式表。我想要整個網頁的漸變背景，但我無法弄清楚如何讓漸變覆蓋整個網頁。目前，漸變的形式是一個典型的橫幅，通過網站複製下來，就像一個「酒吧」在另一個上面。CSS中的漸變背景不需要的重複

關於如何解決這個問題的任何想法？

的代碼，我到目前爲止有：

body { 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF)); 
}

來源

2015-03-31 cssprobs

嘗試使用\t背景大小：蓋; – Kinburn101 2015-03-31 00:53:32

兩個較早答案的組合應該工作：

body { 
min-height: 100vh; 
background: -webkit-linear-gradient(to left bottom, #FBFF94, #00A3EF); 
background: linear-gradient(to left bottom, #FBFF94, #00A3EF); 
}

或者：

body { 
height: 100vh; 
background: -webkit-linear-gradient(to left bottom, #FBFF94, #00A3EF); 
background: linear-gradient(to left bottom, #FBFF94, #00A3EF); 
background-attachment: fixed; 
}

來源

2015-03-31 06:37:07 Shikkediel

height未設置上body。這應該是有幫助的：

body{ 
    height:100%; 
    background:linear-gradient(to left bottom, #FBFF94, #00A3EF); 
}

也許你想要另一個margin:0;那裏。

但是再次使用%代替height並不總是成功，這就是爲什麼您可能會想用vh代替。

來源

2015-03-31 00:55:38 Xufox

我想知道爲什麼我在這個答案上獲得了低估。如果是因爲'％'單位和'vh'單位：我補充說。 – Xufox 2015-03-31 07:14:33

不是很正確的答案，但並不真正值得downvote（是不是我，我會等於它）。至少，漸變的語法要好得多。 – Shikkediel 2015-03-31 07:27:04

問題是：我嘗試了我的代碼，它爲我工作，所以我提交了它... – Xufox 2015-03-31 07:38:00

使用VH單位，這是一個垂直高度。

考慮

100vh = 100％。

body { 

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF)); 

    height:100vh; /* vh = Vertical Height */ 
}

Example Here

來源

2015-03-31 06:01:04 Sandy

其實，100vh不等於100％if有一個水平滾動條。縮寫是用於視口高度。 – Shikkediel 2015-03-31 06:10:08

而不是提到'高度'使用'background-size：auto 100vh'。 – 2015-03-31 07:18:23

CSS中的漸變背景不需要的重複

回答

相關問題