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

FIDDLE

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

Answer 4

使用它：

background: "-webkit-gradient(linear)

通过jQuery的CSS背景

4 个答案: