漸變背景重複

我在爲一個學校項目製作的網站上遇到了一些麻煩。我有漸變背景，但它垂直重複，縮放時尤爲明顯。這裏有一張照片： repeating background 漸變背景重複

下面是的CSS代碼（我猜這就是問題的起源）：

html { 
 
\t background: #45aa99; /* Old browsers */ 
 
\t background: -moz-linear-gradient(top, #10aaff 0%, #2288aa 100%); /* FF3.6+ */ 
 
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,10aaff), color- 
 
             stop(100%,#2288aa)); /* Chrome,Safari4+ */ 
 
\t background: -webkit-linear-gradient(top, #10aaff 0%,#2288aa 100%); 
 
        /* Chrome10+,Safari5.1+ */ 
 
\t background: -o-linear-gradient(top, #10aaff 0%,#2288aa 100%); /* Opera 11.10+ */ 
 
\t background: -ms-linear-gradient(top, #10aaff 0%,#2288aa 100%); /* IE10+ */ 
 
\t background: linear-gradient(to bottom, #10aaff 0%,#2288aa 100%); /* W3C */ 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#10aaff', 
 
       endColorstr='#2288aa',GradientType=0); /* IE6-9 */ 
 
\t }

我想的網頁無論變焦如何，都可以在網站的整個長度上進行漸變。任何想法如何做到這一點？謝謝！

來源

2017-03-01 chef stu

詩篇這裏的pastebins充分HTML和CSS： HTML：[鏈接]（http://pastebin.com/mqBnUhv9） CSS：[鏈接]（http://pastebin.com/2wS10X4K ） –

你正在尋找background-repeat: no-repeat;

你也可以按如下方式指定背景的寬度和高度：

background-size:100px 100px; /* width & height */

下面是關於它的更多的描述信息一LINK。

來源

2017-03-01 17:57:55

這種工作。而不是重複剛剛結束的漸變，並在頁面的其餘部分留下白色（http://imgur.com/a/6gfkB）。有沒有辦法擴展漸變以適應任何級別的縮放的整個網頁？ –

@chefstu我會更新我的答案 –

將html設置爲高度：100％;你可以在背景CSS中失去0％ - 100％。

所以（簡化沒有ALT-瀏覽器選項，爲清楚起見）：

html, body { 
    height:100%; 
    background: linear-gradient(to bottom,#10aaff,#2288aa); /* W3C */ 
}

來源

2017-03-01 18:00:10

謝謝！這工作 –

很酷，很高興工作！注意它/將其標記爲答案？ –

對於梯度以拉伸頁面的整個高度：

html { 
    min-height: 100% 
}

此外，對於顏色上沒有重複任x軸或y軸;那是;水平或垂直;使用;

body { 
    background-repeat: no-repeat; 
}

來源

2017-03-01 18:01:38

漸變背景重複

回答

相關問題