<body> css漸變背景延伸到100％的寬度和高度

所以我想有一個漸變填充100％的網頁背景。對於無法處理它的瀏覽器，純色很好。<body> css漸變背景延伸到100％的寬度和高度

這裏是我當前的css：

html { 
height: 100%; 
} 
body { 
height: 100%; 
margin: 0; 
padding: 0; 
background-repeat: no-repeat; 
background: #afb1b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) no-repeat; /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* W3C */ 
}

它似乎摸出而頁面沒有什麼內容，但我已經有更多的內容，導航，等等填寫頁面，現在一些有底部爲白色。也許100px左右。我做錯了嗎？我需要在某處補償某些填充嗎？

來源

2011-05-16 Unfortunately

看起來像你從這裏得到這個：http://www.colorzilla.com/gradient-editor/ – Jason 2011-05-16 23:35:43

@Jason，我做到了，這是非常徹底的跨瀏覽器，我喜歡。但是，我還沒有測試非FF瀏覽器。這一點很快就會到來。 – Unfortunately 2011-05-17 00:08:51

我使用它很多。它非常跨瀏覽器，並且運行得非常好。 – Jason 2011-05-17 00:16:20

擺脫您的height: 100%聲明。好像將高度設置爲100％只是將其設置爲視口的100％，而不是頁面本身的100％。

來源

2011-05-16 23:43:14 Jason

謝謝，這已經做到了！下面的代碼，即使高度：100％拋出，也起作用。不過，移除高度似乎是正確的做法。 – Unfortunately 2011-05-17 10:43:00

@Jason：小提琴怎麼樣了？ – 2011-12-18 13:34:05

hrm。不知道......怪異！ – Jason 2011-12-19 03:38:16

我還發現，加入「固定」到最後似乎這樣的伎倆：

body { 
margin: 0; 
padding: 0; 
background-repeat: no-repeat; 
background: #afb1b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) fixed no-repeat; /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)) fixed; /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* W3C */ 
}

來源

2011-05-17 10:41:42 Unfortunately

請注意，這將大大降低性能，甚至在較新的瀏覽器！ – Anonymous 2012-01-09 13:38:08

很高興知道！圖像真的是更好的方式來做到這一點？ – Unfortunately 2012-02-07 18:59:48

取決於你所說的更好......因爲我看到性能問題（它肯定是一個bug）是一個大問題，我會這麼說，是的！如果不是這樣的話，css3方法肯定會更好。 – Anonymous 2012-02-07 21:52:36

這裏是我的評論的擴展使用SVG而不是供應商名稱和專有擴展。這減少了CSS的大小，並且通過使用一些獨創性策略，可以允許您將單個SVG文件用作漸變的精靈包（減少HTTP請求的總數）。

首先創建您的SVG文件和梯度（根據您的問題規格）：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="1" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <defs> 
      <linearGradient id="ui-bg-grad" x1="0%" x2="0%" y1="0%" y2="100%"> 
       <stop offset="0%" stop-color="#afb1b4" /> 
       <stop offset="100%" stop-color="#696a6d" /> 
      </linearGradient> 
     </defs> 
     <rect fill="url(#ui-bg-grad)" x="0" y="0" width="100%" height="500"/> 
    </g> 
</svg>

接下來，這裏是你的新的聲明：

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-repeat: no-repeat; 
    background-color: #afb1b4; /* Old browsers: anything not listed below */ 
    background-image: url("grad.svg"); /** Browsers that support SVG: IE9+, FF4+, Safari 4+(maybe 5), Opera 10+ 
}

現在，如果你想支持與PNG舊的瀏覽器圖像，你可以用一點點改變。由於使用url()的任何房產不支持提示（如@font-face的src屬性），因此您必須稍微改變規則。

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-repeat: no-repeat; 
    background-color: #afb1b4; /* Image fails to load, or FF3.5 */ 
    background-image: url("grad.png"); /* Old browsers: anything not listed below or above */ 
} 

body:not(foo) { /* most browsers that support :not() support SVG in url(), except FF3.5 */ 
    background-image: url("grad.svg"); /* Browsers that support SVG: IE9+, FF4+, Safari 4+(maybe 5), Opera 10+ */ 
}

如果你想變得愚蠢瘋狂，你可以base64encode SVG文件，這樣你就不必從服務器下載其他文件，然後將其添加爲重新使用一個類（防止repasting在以base64多個地方）。

.svg-sprite:not(foo) 
{ 
    background-size: 100% 100%; 
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI1MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InVpLWJnLWdyYWQiIHgxPSIwJSIgeDI9IjAlIiB5MT0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYWZiMWI0IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5NmE2ZCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3VpLWJnLWdyYWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MDAiLz48L2c+PC9zdmc+"); 
} 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-repeat: no-repeat; 
    background-color: #afb1b4; /* Image fails to load, or FF3.5 */ 
    background-image: url("grad.png"); /* Old browsers: anything not listed below or above */ 
}

然後更新您的body標籤包括.svg-sprite類。

來源

2011-05-17 18:07:19

如果我有15個聲望，我會投這個票。非常感謝！ – Unfortunately 2011-05-18 04:07:06

@不幸的是，我只是有一個問題，事實上，一個完美的便攜式，穩定的規範沒有看到如css梯度一樣多的影響（這仍然是很大的開發）。 – 2011-05-18 15:44:09

<body> css漸變背景延伸到100％的寬度和高度

回答

相關問題