Question

我假装顺利改变背景，所以最初我有这个CSS块：

body {
  transition: background-image 0.5s ease;
  background-image: linear-gradient(to right top, #D4145A, #FBB03B);
}

然后在我的JS中我试图随机更新（从JSON文件读取十六进制值）我的背景使用这个jQuery方法分配新值：

$.getJSON(gradientsPath, function(json) {
  var rand = Math.floor(Math.random()*json.length);
  $(document.body).css("background-image", "linear-gradient(to right top, " + json[rand]["firstColor"] + ", " + json[rand]["secondColor"] + ") !important");
});

此外，如果有人可以帮助我解决这个小问题：渐变背景适用于Safari，但在Firefox中似乎不起作用。

Answer 1

Juste删除!important属性

Answer 2

根据版本的不同，CSS属性可以有不同的前缀。

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

$(document.body).css("background-image", "-moz-linear-gradient(to right top, " + json[rand]["firstColor"] + ", " + json[rand]["secondColor"] + ") !important");

归功于css-tricks.com。

如何使用jQuery更改背景图像属性（线性渐变）？

2 个答案: