如何刪除使用線性漸變屬性時出現的條紋使用線性漸變CSS屬性時，使用左右作為方向值時，背景顯示無條紋。但是當方向值為頂部或底部時，條紋會出現在背景中。有什么方法可以刪除條紋嗎？這是代碼：body {
background: linear-gradient(to top, red, yellow);}
3 回答
慕虎7371278
TA貢獻1802條經驗 獲得超4個贊
您正面臨復雜的背景傳播，您可以在這里閱讀。我將嘗試用簡單的詞語來解釋它。
你body的身高等于0; 因此背景將不會在其上可見，但默認情況下它具有在元素上8px創建高度的邊距。8pxhtml
為什么不是16px的高度（頂部為8px，底部為8px）？
由于身體的高度為0，我們正面臨一個邊緣碰撞，并且兩個邊緣將只折疊成一個，我們的高度為8px。
然后我們有一個背景傳播body到html，linear-gradient并將覆蓋8px高度。
最后，html的背景傳播到根元素以覆蓋整個區域，這解釋了線性漸變每個都重復8px。
body {
background: linear-gradient(to top, red, yellow);}當使用向左或向右方向時也會重復這種情況但你不會在視覺上看到它是合乎邏輯的，因為它是相同的模式：
body {
background: linear-gradient(to right, red, yellow);}你也可以刪除重復，你會看到它只是覆蓋 8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;}為了避免這種行為，您可以簡單地設置height:100%為html
html {
height: 100%;}body {
background: linear-gradient(to top, red, yellow);}它也可以使用，no-repeat因為默認情況下，linear-gradient覆蓋整個是：
html {
height: 100%;}body {
background: linear-gradient(to top, red, yellow) no-repeat;}
偶然的你
TA貢獻1841條經驗 獲得超3個贊
這是因為計算<body>出的高度是由其內容的高度產生的。當小于視口的高度時，背景將重復：
body {
background: linear-gradient(to top, red, yellow);}為了確保它在整個視口的整個高度延伸本身（背景漸變），你需要給<body>一個min-height與視口的高度等于（100vw）：
body { background: linear-gradient(to top, red, yellow); min-height: 100vh; }body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
margin: 0;}正如@TemaniAfif在評論中指出的那樣，上面的技術原因是：根元素（覆蓋整個視口并從中繼承其背景<body>）與<body>元素之間存在差異，元素按規定可小于視。根據W3C建議：
根元素的背景成為畫布的背景并覆蓋整個畫布，錨定（對于“背景位置”）與在僅為根元素本身繪制時相同的點。根元素不會再次繪制此背景。
浮云間
TA貢獻1829條經驗 獲得超4個贊
并且它比簡單的背景傳播更復雜，我試圖在答案上解釋它但不容易：s ...問題是身體有8px的邊距，這使得html 8px的高度和這一個采取線性 - 漸變作為背景圖像從第一次傳播，因此覆蓋8px然后第二次傳播到根元素保持相同的背景大小，只需重復它，我們有這個結果！...使身體邊緣：0，我們將沒有更多的背景！
- 3 回答
- 0 關注
- 1337 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消