2011-08-07 21 views
22
body{ 
padding:0; 
margin:0; 
font:normal 12px/16px Arial, Helvetica, sans-serif; 
color:#383634; 
background-image: -webkit-gradient(
linear, 
left top, 
left bottom, 
color-stop(0.18, rgb(74,12,107)), 
color-stop(0.87, rgb(102,153,102)) 
); 
background: -moz-linear-gradient(top, #4a0c6b 0%, #669966 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a0c6b),   color-stop(100%,#669966)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #4a0c6b 0%,#669966 100%); /* W3C */ 

O aşağı şekilde çoğu gider sonra tekrarlaresnemeyen Benim css gradyan, bu tekrarlar

cevap

53

Orijinal kodu: İsterseniz http://jsfiddle.net/ecKR4/7/

degrade tüm yüksekliğini germek için

html { 
    min-height: 100% 
} 

küçük içerikle: http://jsfiddle.net/ecKR4/1/
sayfanın Çok fazla içerik ile 210: http://jsfiddle.net/ecKR4/2/

Eğer degrade sabit ve viewport kadar yüksek olmasını istiyorsanız:

html { 
    height: 100% 
} 
body { 
    background-attachment: fixed 
} 

küçük içerikle: http://jsfiddle.net/ecKR4/4/

: Çok fazla içerik ile http://jsfiddle.net/ecKR4/3/

Degradenin görünüm aralığı kadar yüksek olmasını ve arkaplan rengini istiyorsanız:

Biraz içerikle
html { 
    height: 100% 
} 
body { 
    background-repeat: no-repeat; 
    background-color: #669966; /* ending colour of gradient */ 
} 

: http://jsfiddle.net/ecKR4/5/
içeriğin Bolca: http://jsfiddle.net/ecKR4/6/

+2

Sen benim kahramanımsın! "Min yükseklik" için – Mike

+2

+1. "Yükseklik" kullanıyordum ve tüm tarayıcılarda çalışamamıştım. Teşekkürler! – Paul

+1

çok zekice hazırlanmış –