javascript - 如何使用 JQuery 替换 CSS 背景图片并保持渐变？

Question

我正在尝试动态替换 div 的 background-image 属性，同时使用 jQuery 的 维护其他与背景相关的属性(例如颜色和渐变) .css() 函数。到目前为止，我可以替换图像，但后来我失去了其他属性。如何在不丢失其他 CSS 背景属性的情况下执行此操作？

CSS

.myClass{
    width:100px;
    height:100px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/b/b9/Hookem_hand.gif) center no-repeat, 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;
}

JS/JQuery

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 match = background.match(pattern);
console.log(match);

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

// elem.css({"background-image":replacementImage}); //this removes the other backgroud css such as gradient and color
elem.css({"background":updatedBG}); //this does not have any effect on the div

HTML

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

我有一个 JSFiddle 演示正在发生的事情:http://jsfiddle.net/joedegiovanni/2ns61st9/4/

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

提前感谢您的帮助。

Answer 1

这是您的 jsfiddle 的更新版本。

http://jsfiddle.net/2ns61st9/5/ 1

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

看看我的修改。

主要问题是背景图像和背景图案使用相同的 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>

这是 JQuery

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