HTML背景漸變重複

只是將漸變背景應用到延伸過摺疊的網頁中。漸變起作用，並且看起來很完美，直到頁腳高度爲10像素的高度差爲漸變起點的顏色。這樣看來梯度被「重複」HTML背景漸變重複

http://s30.postimg.org/6r64lcqkx/problem.png

在那裏，它是。我已經嘗試了HTML /身高修復又名：

CSS：

html { 
    height:100% 
} 

body { 
    min-height:100%; 
}

但只是使事情通過在窗口的確切高度重複的梯度差。

這裏是目前的身體元素的代碼

CSS：

body { 
    background: #650000; /* Old browsers */ 
    background: -moz-linear-gradient(top, #650000 0%, #d40000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000), color-stop(100%,#d40000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #650000 0%,#d40000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #650000 0%,#d40000 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #650000 0%,#d40000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#650000', endColorstr='#d40000',GradientType=0); /* IE6-9 */ 
    font-family: 'helveticaneue_bold'; 
    font-size:11px; 
}

禮貌Wijnand的：http://jsfiddle.net/ey7kfog3/

來源

2014-09-24 BITmixit

添加的jsfiddle與您的代碼。它是更容易幫助與實際代碼，不只是一個圖像.. :-) – rblarsen 2014-09-24 14:04:47

我做了一個小提琴：http://jsfiddle.net/ey7kfog3/ – 2014-09-24 14:08:48

乾杯Wijnand，添加到帖子。 – BITmixit 2014-09-24 14:12:02

body有保證金默認情況下，大多數如果不是所有的瀏覽器。因此，垂直滾動條，事實上你已經設置了100％的高度，並沒有設置超過100 ...

在DevTools或Firebug，你可以顯示這些默認值（Firebug：HTML /風格的權利，它是在下拉菜單中），並看到身體上有8px的邊距，因此身體高於100px×16px，這是重複漸變的精確值（在Firefox中）。

只需添加body { margin: 0; }並且不再滾動條或重複漸變。

小提琴：http://jsfiddle.net/ey7kfog3/4/

編輯：這是存在於大多數reset.css和都像Eric Meyer的一個或normalize

來源

2014-09-24 15:06:59 FelipeAls

這讓我回顧我的自定義CSS，因爲我正在使用規範化。這是一個我將放在一個被用作容器的類上的邊緣。無論如何都是爲了測試而擺脫了保證金，現在一切正常。我的不好，這是正確的。 – BITmixit 2014-09-25 10:33:02

我固定它的U：Fiddle

的CSS ：

body, html { 
height:100%; 
width: 100%; 
} 
.background { 
background: #650000; /* Old browsers */ 
background: -moz-linear-gradient(top, #650000 0%, #d40000 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000),   color-stop(100%,#d40000)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #650000 0%,#d40000 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #650000 0%,#d40000 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #650000 0%,#d40000 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#650000',   endColorstr='#d40000',GradientType=0); /* IE6-9 */ 
font-family: 'helveticaneue_bold'; 
font-size:11px; 
height: 100%; 
width: 100%; 
}

的HTML：

<div class="background"></div>

然後你就可以了，

postition: fixed;

，所以你得到相同的效果就好像它是身體

希望工程的ü

來源

2014-09-24 14:14:55

現在有2個滾動條... – FelipeAls 2014-09-24 15:09:00

它看起來很奇怪，我不知道它爲什麼這樣工作！最快的解決方法將是

body { 
    min-height:94%; 
}

看看這個FIDDLE

來源

2014-09-24 14:27:38

在我當前的項目中不起作用。 – BITmixit 2014-09-25 10:24:27

可以使用div作爲容器。我已經使用固定的位置設置0左，右，上，下和添加溢出自動，因爲它應該作爲身體容器。

也從身體隱藏滾動條。檢查您的更新fiddle。

html { 
    height:100% 
} 

body { 
    min-height:100%; overflow:hidden; 
} 
div.test {position:fixed; top:0; bottom:0; left:0; right:0; overflow:auto; 
    background: #650000; /* Old browsers */ 
    background: -moz-linear-gradient(top, #650000 0%, #d40000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#650000), color-stop(100%,#d40000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #650000 0%,#d40000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #650000 0%,#d40000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #650000 0%,#d40000 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #650000 0%,#d40000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#650000', endColorstr='#d40000',GradientType=0); /* IE6-9 */ 
    font-family: 'helveticaneue_bold'; 
margin:0; 
}

來源

2014-09-24 14:59:36

HTML背景漸變重複

回答

相關問題