Question

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

CSS

.css()

JS / JQuery的

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

HTML

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

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

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

提前感谢您的帮助。

Answer 1

以下是您的jsfiddle的更新版本。

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

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

看看我的修改。

主要问题是背景图片和使用相同css属性的背景图案，所以当你在那里替换属性值时，你会杀死背景图案。

正如你所看到的，我基本上将背景图案添加到另一个变量中，然后我将它们合并在一起。然后我设置了background-image属性。

在示例中正在工作。如果这对你有用，请告诉我！

没有创建额外的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);

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

CSS

JS / JQuery的

HTML

1 个答案: