jquery - 通过 jQuery 实现的 CSS 背景

Question

我正在尝试使用 jQuery 添加 CSS 属性，但背景选择器存在问题。现在我有：

$('#nav_wrap').css({ 'position': 'fixed',
                     'margin-top':0,
                     'z-index':400,
                     'background-color': 'red',
                     'top':0,
                     'left':0 });

这给出了红色的颜色就好了，代码没有错。我想要做的是让它成为一个渐变，但是当我把它改成这样时：

 $('#nav_wrap').css({ 'position': 'fixed',
                      'margin-top':0,
                      'z-index':400,
                      'background': 'linear-gradient(top, #dc0000 0%,#650101 100%)',
                      'top':0, 'left':0 });

背景属性无法识别。任何想法为什么？谢谢。

Answer 1

正如您在评论中演示使用类而不是为此目的手动设置每个 CSS 属性时，以下是跨浏览器 (IE8+) 的方法：

CSS

.yourClass {
  position: fixed;
  margin-top: 0;
  z-index: 400;
  top: 0;
  left: 0;

  /* Safari 5.1, Chrome 10+ */
  background-image: -webkit-linear-gradient(top, #dc0000, #650101);

  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc0000), to(#650101));

  /* FF 3.6+ */
  background-image: -moz-linear-gradient(top, #dc0000, #650101); 

  /* Opera 11.10 */ 
  background-image: -o-linear-gradient(top, #dc0000, #650101);

  /* Standard, IE 10 */
  background-image: linear-gradient(to bottom, #dc0000, #650101);

  /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdc0000', endColorstr='#ff650101', GradientType=0);
}

JS

$('#nav_wrap').addClass("yourClass");

Answer 2

为什么不使用类而不是使用 jquery 添加和删除类

$('#check').addClass('gradient'); //add class
$('#check').removeClass('gradient'); //remove class

小提琴

Answer 3

尝试

$('#nav_wrap').css({ 'position': 'fixed',
                  'margin-top':0,
                  'z-index':400,
                  'background': 'linear-gradient(to bottom, #dc0000 0%,#650101 100%)',
                  'top':0, 'left':0 });