CSS Background Linear Gradient từ trên xuống dưới

Tôi đang cố gắng để tạo ra một gradient tuyến tính từ trên xuống dưới cùng như:CSS Background Linear Gradient từ trên xuống dưới

Gradient I want!

Đáng tiếc là những gì tôi nhận được là:

Gradient I get

Sau đây là HTML của tôi:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Page</title> 
    <link rel="stylesheet" href="test.css"> 
</head> 
<body> 
     Hi 
</body> 
</html>

Và CSS của tôi:

body{ 
    background: linear-gradient(0deg, white, blue 80%) ; 
}

Nếu tôi làm 90deg, thay vì 0deg sau đó tôi có được điều này:

Gradient with 90deg

Tôi cần gradient này - nhưng nó phải được luân chuyển bởi 90deg tức là từ trên xuống ở phía dưới thay vì từ trái sang phải. Tôi tò mò tại sao 0deg dường như cung cấp cho một cái gì đó tương tự như một gradient lặp đi lặp lại.

Tôi đã sử dụng các trình duyệt, Firefox 21 và Chrome 27. Tôi rất biết ơn mọi lời khuyên.

Nguồn

2013-06-18 O.O.

Whats chiều cao tính toán của cơ thể bạn? Thử đặt thân CSS thành 100% chiều cao – jtheman

Hãy thử đặt nền trên <html> thay vì - có thể được dễ dàng hơn để quản lý . Sau đó, hãy cung cấp cho nó height:100%; để đảm bảo mở rộng toàn bộ trang.

Tôi cũng đặt thành no-repeat để bạn chỉ có một gradient thay vì bắt đầu lại ở phía dưới khi bạn có nội dung dài hơn.

html{ 
    height:100%; 
    background: linear-gradient(0deg, white, blue 80%) no-repeat; 
}

http://jsfiddle.net/daCrosby/nEQeZ/1/

Sửa

fr13d chỉ ra trong các ý kiến, khi đưa gradient trên html gradient sẽ ngừng trên dưới cùng của trang đầu tiên, trước khi bất kỳ cuộn. Đó là, gradient được cắt bỏ khi bạn cuộn (đáng chú ý nếu màu nền khác với màu thấp hơn của gradient).

Một cách để khắc này là để đưa các phong cách trên body thay vì:

body{ 
    height:100%; 
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat; 
}

http://jsfiddle.net/daCrosby/nEQeZ/117/

Nguồn

2013-06-18 22:27:44 DACrosby

Điều đó hoạt động hoàn hảo ** DACrosby **. Cảm ơn bạn. –

Một chút trễ, nhưng có vẻ như nếu '' chứa đủ nội dung để mở rộng qua cuối màn hình, khi bạn cuộn xuống, phần mới mà srcolls vào xem không còn nền nữa. (Khi phần dưới cùng của gradient của bạn là màu trắng, điều này sẽ không quan trọng trong trường hợp của bạn.) – fr13d

điểm tốt @ fr13d, tôi đã cập nhật câu trả lời của tôi – DACrosby

Một cách là để cung cấp cho các <body> và <html> yếu tố chiều cao rõ ràng như trước đây có không, cũng không phải nội dung bất kỳ:

http://jsfiddle.net/qL9mg/1/

Nguồn

2013-06-18 22:11:46 Adrift

Cảm ơn ** Adrift **. Điều này dường như sắp xếp công việc. Nếu bạn làm điều đó mà không có 'html' tức là chỉ' body', thì nó không hoạt động. Tại sao bạn cần cả hai 'body' và' html' được chỉ định? –

Ngoài ra, nếu bạn sử dụng thanh cuộn để cuộn xuống dưới cùng, nó có đường màu xanh đậm. Chúng ta có thể tránh điều đó không? –

@ O.O: Vì '' không biết chiều cao 100% là * tham chiếu * đến, vì giá trị phần trăm luôn luôn liên quan đến một giá trị khác, ví dụ: chiều cao của cha mẹ. – Adrift

thử điều này:

html { 
    height: 100%; 
    background: linear-gradient(0deg, white, blue 80%) ; 
} 

body { 
    height: 0%; 
}

Nguồn

2014-06-30 13:02:25 teteArg

Tôi đồng ý với giải pháp từ @DACrosby, nhưng khuyên để mở rộng nền với 'cố định'. Trong trường hợp đó, nền của bạn sẽ ở lại tại chỗ và bạn sẽ có độ dốc cho toàn bộ trang web không chỉ ở trên cùng.

background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;

Nguồn

2014-07-31 12:08:29 WebWorker

CSS Background Linear Gradient từ trên xuống dưới

Trả lời

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