Làm cách nào để sử dụng mixin nền background-with-css2-fallback?

Question

Tôi làm cách nào để sử dụng hỗn hợp Compass background-with-css2-fallback với dự phòng?

Tôi đặc biệt muốn có thể đặt màu nền mặc định cho các phiên bản cũ hơn của IE.

Đây là những gì tôi đang cố gắng, nhưng IE8 và dưới đây dường như không nhận ra nó:

div { 
    background: #0E1B31; 
    @include background-with-css2-fallback(linear-gradient(top, #0E1B31, #0A1322)); 
} 

Answer 1

Mục đích của background-with-css2-fallback là để giúp bạn tiết kiệm từ văn bản cho dòng background: #0E1B31;. Bạn sẽ sử dụng nó như thế này:

div { 
    @include background-with-css2-fallback(linear-gradient(top, #0E1B31, #0A1322), #0E1B31); 
} 

Những gì bạn sẽ có được điều này là:

div { 
    background: #0e1b31; 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0e1b31), color-stop(100%, #0a1322)), #0e1b31; 
    background: -webkit-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; 
    background: -moz-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; 
    background: -o-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; 
    background: -ms-linear-gradient(top, #0e1b31, #0a1322), #0e1b31; 
    background: linear-gradient(top, #0e1b31, #0a1322), #0e1b31; 
} 

Tôi nghĩ rằng bạn thực sự chỉ muốn:

div { 
    background: #0E1B31; 
    @include background(linear-gradient(top, #0E1B31, #0A1322)); 
} 

Nó sẽ làm việc như nhau, được dễ đọc hơn và đầu ra ít mã hơn. Bạn có thể thay đổi bao gồm thành background-image nếu bạn muốn màu sắc dính xung quanh phía sau gradient trong các trình duyệt mới hơn.