2012-04-18 28 views
6

Tôi đang sử dụng một mã CSS như một sau đây để tạo ra một nền radial gradient:Làm thế nào để tạo ra một gradient xuyên tâm toàn diện?

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

nhưng kết quả không phải là một dự định! Mục tiêu của tôi là có một nền gradient xuyên tâm bao phủ toàn bộ khung nhìn. Tôi có thể sử dụng thuộc tính background-size là một phần của đặc tả CSS3 để có kết quả tốt hơn, nhưng tiếc là thuộc tính này không hoạt động trong IE?
Có ai có ý tưởng không?

+2

Nhắm mục tiêu 'html', để' body' vẫn trong suốt. – MetalFrog

Trả lời

10

Thêm phần này vào CSS của bạn:

html { 
    height: 100% 
} 
11

Thậm chí tốt hơn:

html { 
    min-height: 100%; 
} 

Điều này sẽ làm gradient kéo dài đến chiều cao nội dung của bạn nếu không nó sẽ được giới hạn chỉ là chiều cao cửa sổ.

Các vấn đề liên quan