Làm thế nào bạn có thể tạo ra một nền gradient mà không có hình ảnh?

Question

Như thế này. nói chung tôi sẽ làm cho 1 px hình ảnh rộng của điều này sau đó sẽ repeat-x.

nhưng có thể tạo cùng một loại nền với CSS3 hay không, nếu có thì hãy cho tôi biết làm thế nào để thực hiện tương tự như vậy.

alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png

với tất cả khả năng tương thích trình duyệt IE 8, 7, 6, FF, Chrome, Safari, iphone.

Answer 1

Khá nhiều tất cả các trình duyệt hỗ trợ gradient. Đây là CSS bạn cần:

.gradient{ 
    /* For any browser that can't create a gradient */ 
    background-color: #EFEFEF; 
    /*//mozilla*/ 
    background: -moz-linear-gradient(top, #efefef, #FFF); 
    /* Chrome/Safari  */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF)); 
    /*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF'); 
    /*IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)"; 
} 

Answer 2

Tôi nghĩ IE 6 và 7 có thể không hỗ trợ CSS3 gradient. Mặc dù, bạn có thể lấy mã CSS từ trang web này http://gradients.glrzad.com/

Answer 3

Hãy thử một số máy phát điện CSS gradient mà bạn có thể tìm thấy với một tìm kiếm Google, chẳng hạn như: http://gradients.glrzad.com/

hoặc

http://www.designdetector.com/demos/css-gradients-demo-1.php

Ngoài ra, hãy nhìn vào độ dốc hướng dẫn Webkit của: http://webkit.org/blog/175/introducing-css-gradients/

Và Firefox: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Bây giờ - lưu ý: Đây là công cụ mới - CSS3 chưa được hoàn thiện. Trình duyệt hỗ trợ cho các công cụ CSS3 là rất cắt cạnh. Bạn sẽ không nhận được hỗ trợ trình duyệt chéo cho các trình duyệt bạn đã liệt kê. Webkit mới nhất (Safari, Google Chrome) và Firefox là các cược tốt nhất của bạn. IE hỗ trợ các bộ lọc. Opera không hỗ trợ bất kỳ loại gradient nào.