通过jQuery添加带厂商前缀背景渐变，为何仅最后一个样式生效？

你的代码里出现的问题根源是JavaScript对象的键唯一性：当对象中存在多个同名键时，后面的键值对会直接覆盖前面的，所以你定义的三个background属性最终只有最后一个生效。

解决方案1：拆分带前缀的属性名 #

将不同浏览器前缀的渐变属性拆分为独立的带前缀属性，确保每个声明都能被应用：

$('.colorshiftdots:nth-child(1) .colorshiftfilter').each(function() {
  var styles = {        
    '-webkit-background': '-webkit-gradient(linear, right top, left top, from(rgba(' + backgroundcolor + ', 1)), color-stop(55%, rgba(' + backgroundcolor + ', .13)), color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)))',
    '-o-background': '-o-linear-gradient(right, rgba(' + backgroundcolor + ', 1) 0%, rgba(' + backgroundcolor + ', .13) 55%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 1) 100%)',
    'background': 'linear-gradient(-90deg, rgba(' + backgroundcolor + ', 1) 0%, rgba(' + backgroundcolor + ', .13) 55%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 1) 100%)',
    'opacity': '1'
  };

  $(this).css(styles);
});

解决方案2：合并为单个background值 #

把所有前缀渐变声明合并到同一个background属性中，浏览器会自动忽略不支持的语法：

$('.colorshiftdots:nth-child(1) .colorshiftfilter').each(function() {
  var gradientStr = [
    '-webkit-gradient(linear, right top, left top, from(rgba(' + backgroundcolor + ', 1)), color-stop(55%, rgba(' + backgroundcolor + ', .13)), color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)))',
    '-o-linear-gradient(right, rgba(' + backgroundcolor + ', 1) 0%, rgba(' + backgroundcolor + ', .13) 55%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 1) 100%)',
    'linear-gradient(-90deg, rgba(' + backgroundcolor + ', 1) 0%, rgba(' + backgroundcolor + ', .13) 55%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 1) 100%)'
  ].join(', ');

  var styles = {        
    'background': gradientStr,
    'opacity': '1'
  };

  $(this).css(styles);
});

额外提示 #

目前主流浏览器已经全面支持标准的linear-gradient语法，如果不需要兼容IE9及更早版本、旧版Safari/Opera，完全可以只保留标准声明，去掉前缀版本，让代码更简洁。

内容的提问来源于stack exchange，提问作者Jason Howard