Làm thế nào để sử dụng Bootstrap 3 gradient cho nền trong CSS?

Question

tôi cần trợ giúp.
Làm cách nào có thể sử dụng độ dốc Bootstrap 3?
tôi nên làm gì ?. nếu độ dốc nên được đặt trên "CSS", vậy làm cách nào? tôi đã cố gắng như thế này:

.footer { 
 
    margin-top: 20px; 
 
    background-image: #gradient >.vertical(#4F364C, #FFFFFF); 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<footer id="footer" class="footer"> 
 
    <div class="row row-footer"> 
 
    <div class="col-xs-6 text-left left"> 
 
     <small>© 2015 newbiecom</small> 
 
    </div> 
 
    <div class="col-xs-6 text-right"> 
 
     <small>Support: Bootstrap Fontawesome</small> 
 
    </div> 
 
    </div> 
 
</footer>

Nhưng, nó không hoạt động.

Answer 1

Cú pháp đúng cho linear-gradient là:

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+) 
        \---------------------------------/ \----------------------------/ 
        Definition of the gradient line  List of color stops 

where <side-or-corner> = [left | right] || [top | bottom] 
    and <color-stop>  = <color> [ <percentage> | <length> ]? 

.footer { 
 
    margin-top: 20px; 
 
    background-image: linear-gradient(90deg, #4F364C, #FFFFFF); 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<footer id="footer" class="footer"> 
 
    <div class="row row-footer"> 
 
    <div class="col-xs-6 text-left left"> 
 
     <small>© 2015 newbiecom</small> 
 
    </div> 
 
    <div class="col-xs-6 text-right"> 
 
     <small>Support: Bootstrap Fontawesome</small> 
 
    </div> 
 
    </div> 
 
</footer>

Answer 2

thử loại này, chỉ chắc chắn rằng nó được bán tiền tố:

background-image: linear-gradient(top, #4F364C, #FFFFFF); 

Answer 3

Bạn đang cố gắng sử dụng Bootstrap's gradient mixins . Nếu bạn muốn sử dụng chúng, bạn cần bỏ qua việc thêm thuộc tính background-image ở phía trước nó. Vì vậy, trong trường hợp của bạn, nó sẽ là:

.footer { 
    margin-top: 20px; 
    #gradient >.vertical(#4F364C, #FFFFFF); 
}