Question

所以我想在一个独特的css类的background中添加所有webkits。我有同一个类的倍数div，有人告诉我，我可以使用查询函数，如：

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

函数pegar_as_duas_cores_e_gerar_gradient_para_o_galao()不起作用，但为什么？我可以实际使用.css({...})吗？这实际上是我第一次看到这样的查询。

修改

我看到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

可能是因为你总是用另一个值覆盖你的背景..

您不应该执行以下操作：element {background：xxx，background：xxx}，而是执行此操作：element {background：xxx，xxx，xxx}

完整说明：MDN Multiple Backgrounds CSS

添加倍数＆＃39;背景＆＃39;进入css类

1 个答案: