Javascript 如何使用JQuery替换CSS背景图像并保持渐变？

我正在尝试使用jQuery的

.css（）

函数动态替换

div的
背景图像
属性，同时维护其他与背景相关的属性（例如颜色和渐变）。到目前为止，我可以替换图像，但随后我会丢失其他属性。如何在不丢失其他CSS背景属性的情况下执行此操作

CSS
JS/JQuery
HTML

不变的
改变

我有一个JSFIDLE来演示正在发生的事情：

有没有办法正确执行此操作，以便不会丢失其他背景属性？我不知道为什么这不起作用

提前感谢您的帮助。
这是您的JSFIDLE的更新版本


我不知道你为什么需要正则表达式，但是当你使用正则表达式模式时，它会弄乱变量的值

看看我的修改

主要的问题是，背景图像和背景模式使用相同的css属性，因此，当替换属性值时，您将删除背景模式

如您所见，我基本上将背景模式添加到一个附加变量中，然后将两者合并在一起，然后设置背景图像属性

在这个例子中，它是有效的。请让我知道这是否适合你

没有创建额外的css类，我只是稍微修改了你的类

这是CSS

.myClass{
    width:100px;
    height:100px;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b9/Hookem_hand.gif),repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(102, 102, 102) 3px, rgb(102, 102, 102) 6px), linear-gradient(rgb(51, 51, 51), rgb(153, 153, 153));
    color:white;
    text-align:center;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
}

这是HTML

<div class="myClass">
    unchanged
</div>
<div id="changeMe" class="myClass">
    changed
</div>

<div class="myClass">
    unchanged
</div>
<div id="changeMe" class="myClass">
    changed
</div>

.myClass{
    width:100px;
    height:100px;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b9/Hookem_hand.gif),repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(102, 102, 102) 3px, rgb(102, 102, 102) 6px), linear-gradient(rgb(51, 51, 51), rgb(153, 153, 153));
    color:white;
    text-align:center;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
}

<div class="myClass">
    unchanged
</div>
<div id="changeMe" class="myClass">
    changed
</div>

var elem = $("#changeMe");
var pattern = new RegExp(/url\(https?:[^,]*\)/);
var background = elem.css("background");
var replacementImage = "url(http://upload.wikimedia.org/wikipedia/commons/d/d1/Circle-question.png)";
var bgpattern = ", repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(102, 102, 102) 3px, rgb(102, 102, 102) 6px), linear-gradient(rgb(51, 51, 51), rgb(153, 153, 153))";

var match = background.match(pattern);
console.log(match);

var updatedBG = background.replace(pattern,replacementImage);
console.log(updatedBG);

replacementImage = replacementImage + bgpattern;

elem.css("background-image", replacementImage);