为什么css背景jQuery代码不起作用jQuery设置多个CSS值答案

【问题标题】：Why css background jQuery code is not working jQuery set multiple CSS values为什么css背景jQuery代码不起作用jQuery设置多个CSS值
【发布时间】：2016-10-06 07:22:11
【问题描述】：

我正在尝试使用 jQuery 添加背景，但此代码不起作用

$("#search").css({'background':'url(imageurl) no-repeat center center;width:32px;height:32px;'});

只有下面的代码有效

 $("#search").css({'background':'url(imageurl) '});

我想用 jquery 来实现这个

background:url(spinner.gif) 无重复中心 center;width:32px;height:32px;

**At least add the reason for downvote..........**

【问题讨论】：

How to define multiple CSS attributes in JQuery?的可能重复
@kristjanreinhold 我想设置背景高度和宽度而不是元素。
将宽度/高度设置为背景的 CSS 属性是 background-size。
@RakeshSojitra 您正在将 CSS 属性设置为元素。
@QaisarSatti：好的，我已经添加了答案。请看那个。忽略我的评论。

标签： javascript jquery css

【解决方案1】：

您需要将每个 CSS 规则放在对象的自己的属性中。试试这个：

$("#search").css({ 
    'background': 'url(imageurl) no-repeat center center',
    'width': '32px',
    'height': '32px'
});

更好的是，将这些规则放入样式表中的类中，并改用addClass()。这更可取，因为它将 CSS 逻辑与 JS 分开。

【讨论】：

但它设置元素的高度和宽度而不是背景。
嗯，是的。这就是height 和width 所做的。如果要设置背景比例，请使用background-size:developer.mozilla.org/en-US/docs/Web/CSS/background-size

【解决方案2】：

像下面这样使用

$("#search").css({'background': 'url(imageurl) no-repeat center center','background-size':'32px 32px'});

或

$("#search").css({'background': 'url("imageurl") no-repeat scroll center center / 32px 32px'});

【讨论】：