Nhiều màu nền dọc trong CSS3

Question

Vấn đề:

Đang cố gắng để tạo ra một giải pháp mà sẽ cho phép tôi có năm nhiều màu nền mà điền vào một trang web bất kể chiều rộng. Tôi đã quản lý để làm điều này với 5 thẻ div nhưng tôi tự hỏi nếu nó có thể làm điều này hoàn toàn bằng cách sử dụng CSS3?

Kết quả tôi muốn là:

Tôi đã tìm kiếm Stackoverflow và các trang web mà không cần bất kỳ kết quả, hoặc chỉ đơn giản là tôi rất xấu tại tìm kiếm.

Answer 1

Bạn có thể sử dụng linear-gradients để đạt được điều này.

Example Here

html, body { 
    height: 100%; 
} 
body { 
    background-image: linear-gradient(90deg, 
     #F6D6A8 20%, 
     #F5BA55 20%, #F5BA55 40%, 
     #F09741 40%, #F09741 60%, 
     #327AB2 60%, #327AB2 80%, 
     #3A94F6 80%); 
} 

Chỉ cần thêm tiền tố nhà cung cấp để hỗ trợ trình duyệt bổ sung

body { 
    background: -moz-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
    background: -webkit-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
    background: linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%); 
} 

Hỗ trợ trình duyệt có thể được tìm thấy here.

Answer 2

Nhìn vào điều này tôi đã thực hiện một thủ thuật cho việc này. http://jsfiddle.net/753gugpt/

tôi đã sử dụng tài sản linear-gradient CSS3 như thế này:

#container { 
 
    width: 100%; 
 
    /*or 900px for example */ 
 
    overflow-x: hidden; 
 
} 
 
#exampleB { 
 
    width: 32700px; 
 
    height: 285px; 
 
    background-color: #a8e9ff; 
 
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#a8e9ff, endColorstr=#052afc); 
 
    background-image: -moz-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -webkit-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -o-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -ms-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%); 
 
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #a8e9ff), color-stop(0%, #052afc), color-stop(12%, #485e69), color-stop(1%, #ff8d00)); 
 
}

<div id="container"> 
 
    <div id="exampleB"></div> 
 
</div>

lẽ điều này sẽ làm việc cho bạn :)