2012-04-18 3 views
6

Я использую код CSS, как следующие один для создания радиального градиента фона:Как создать радиальный градиент полного покрытия?

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); 
} 

но результат не соответствует предполагаемым один! Моя цель - иметь радиальный градиентный фон, который охватывает весь видовой экран. Я могу использовать свойство background-size, которое является частью спецификации CSS3, чтобы получить лучший результат, но, к сожалению, это свойство не работает в IE?
У кого-нибудь есть идея, пожалуйста?

+2

Target 'html', let' body' остается прозрачным. – MetalFrog

ответ

10

Добавьте это в CSS:

html { 
    height: 100% 
} 
11

Еще лучше:

html { 
    min-height: 100%; 
} 

Это позволит сделать градиент распространяется на вашу высоту содержимого в противном случае он будет ограничен только высоты окна.

Смежные вопросы