複数の 'background'をCSSクラスに追加

Question

私はユニークなCSSクラスのbackgroundにすべてのウェブキットを追加したいと思います。私は誰かが私はのようなクエリ機能を使用することができることを私に言った、同じクラスで倍数のdiv要素を持っている：

var cor1 = "000"; 
 
var cor2 = "fff"; 
 

 
function pegar_as_duas_cores_e_gerar_gradient_para_o_galao() { 
 

 
    var gradient1 = "-moz-linear-gradient(top, #" + cor1 + " 0%, #" + cor2 + " 100%) !important;"; 
 
    var gradient2 = "-webkit-gradient(left top, left bottom, color-stop(0%, #" + cor1 + "), color-stop(100%, #" + cor2 + ")) !important;"; 
 
    var gradient3 = "-webkit-linear-gradient(top, #" + cor1 + " 0%, #" + cor2 + " 100%) !important;"; 
 
    var gradient4 = "-o-linear-gradient(top, #" + cor1 + " 0%, #" + cor2 + " 100%) !important;"; 
 
    var gradient5 = "-ms-linear-gradient(top, #" + cor1 + " 0%, #" + cor2 + " 100%) !important;"; 
 
    var gradient6 = "linear-gradient(to bottom, #" + cor1 + " 0%, #" + cor2 + " 100%) !important;"; 
 

 
    $('.conteudoGalao').css({ 
 
    'background': gradient1, 
 
    'background': gradient2, 
 
    'background': gradient3, 
 
    'background': gradient4, 
 
    'background': gradient5, 
 
    'background': gradient6 
 
    }); 
 
} 
 

 
$('#btn_teste').click(function() { 
 
    pegar_as_duas_cores_e_gerar_gradient_para_o_galao(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="desenhoGalao"> 
 
    <div class="tampaGalao"></div> 
 
    <div class="conteudoGalao"></div> 
 
</div> 
 
<button id="btn_teste">Test</button>

機能pegar_as_duas_cores_e_gerar_gradient_para_o_galao()は動作しませんが、なぜですか？実際に.css({...})を使用できますか？このようなクエリを見たのは実際に初めてのことです。

EDIT：

私はthis postを見て、にコードを変更：

var cor1 = "000"; 
var cor2 = "fff"; 
function pegar_as_duas_cores_e_gerar_gradient_para_o_galao(){ 
    var i, l, backgrounds = [ 
        '-moz-linear-gradient(top, #' + cor1 + ' 0%, #' + cor2 + ' 100%)', 
        '-webkit-gradient(left top, left bottom, color-stop(0%, #' + cor1 + '), color-stop(100%, #' + cor2 + '))', 
        '-webkit-linear-gradient(top, #' + cor1 + ' 0%, #' + cor2 + ' 100%)', 
        '-o-linear-gradient(top, #' + cor1 + ' 0%, #' + cor2 + ' 100%)', 
        '-ms-linear-gradient(top, #' + cor1 + ' 0%, #' + cor2 + ' 100%)', 
        'linear-gradient(to bottom, #' + cor1 + ' 0%, #' + cor2 + ' 100%)' 
       ]; 
       for(i = 0, l = backgrounds.length ; i < l ; i++) { 
        $('conteudoGalao').css({ background: backgrounds[i] }); 
       } 
       $('.conteudoGalao').css({ 
        'filter': "progid:DXImageTransform.Microsoft.gradient(startColorstr='#" + cor1 + "', endColorstr='#" + cor2 + "', GradientType=0)" 
       }); 
      } 

      $('#btn_teste').click(function(){ 
       pegar_as_duas_cores_e_gerar_gradient_para_o_galao(); 
      }); 

それはどちらか動作しません。両方とも私にエラーや何も表示されません。何か案は？おそらく

Answer 1

あなたは常に別の値を使用して背景を上書きするので...

あなたが何かすべきではない：要素{背景：XXX、背景：XXX}が、代わりにこれを行う：要素{背景：XXX、XXXを、 xxxは}

詳しい説明：あなたは基本的に使用しているMDN Multiple Backgrounds CSS