2012-04-18 20 views
6

Używam kod CSS jak poniżej jednego do tworzenia radialnych gradientów tle:Jak utworzyć gradient radialny z pełnym pokryciem?

body 
{ 
background-color: #0176A0; 
background-image: -moz-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: -webkit-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: -o-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: -ms-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
background-image: radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%); 
filter:    progid:DXImageTransform.Microsoft.gradient(startColorstr = '#029CC9', endColorstr = '#005077', GradientType = 0); 
} 

ale wynik nie jest zamierzona jeden! Moim celem jest posiadanie promieniowego tła gradientowego, które obejmuje całą powierzchnię ekranu. Mogę użyć właściwości background-size, która jest częścią specyfikacji CSS3, aby uzyskać lepszy wynik, ale niestety ta właściwość nie działa w IE?
Czy ktoś ma pomysł?

+2

Docelowe 'html', niech' body' pozostanie przezroczyste. – MetalFrog

Odpowiedz

10

Dodaj to do Twojego CSS:

html { 
    height: 100% 
} 
11

Nawet lepiej:

html { 
    min-height: 100%; 
} 

To sprawi, gradient przedłużyć do swojego wzrostu zawartości inaczej będzie ograniczone tylko do wysokości okna.