如何使用JQuery替换CSS背景图像并保持渐变? [英] How can I use JQuery to replace CSS background image and maintain gradient?

问题描述

我正在尝试动态替换div的background-image属性，同时使用jQuery的.css()函数保持其他与背景相关的属性(例如颜色和渐变).到目前为止，我可以替换图像，但是随后我失去了其他属性.如何在不失去其他CSS背景属性的情况下做到这一点?

I am trying to dynamically replace the background-image property of a div while maintaining the other background related properties (such as color and gradient) using jQuery's .css() function. So far I can replace the image, but then I lose the other properties. How can I do this without losing the other CSS background properties?

.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/

I have a JSFiddle that demonstrates what is happening: http://jsfiddle.net/joedegiovanni/2ns61st9/4/

是否有一种方法可以正确执行此操作，从而不会丢失其他背景属性?我不确定为什么这行不通.

Is there a way to do this properly so the other background properties are not lost? I am not sure why this doesn't work.

谢谢您的帮助.

推荐答案

这是您的jsfiddle的更新版本.

Here is an updated version of your jsfiddle.

http://jsfiddle.net/2ns61st9/5/ 我不知道为什么在那里需要该正则表达式，但是当您使用正则表达式模式时，它弄乱了变量的值.

I don't know why you need that regular expression there, but it's messing up with the variable's value when you use the regular expression pattern.

看看我的修改.

主要问题是背景图像和背景图案使用相同的css属性，因此，当您替换属性的值时，您将杀死背景图案.

The main issue was that the background image and the background pattern where using the same css attribute, so when you where replacing the attribute's value you where killing the background pattern.

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

As you can see, I basically added that background pattern into an additional variable and then I'm merging both together., Then I set the background-image attribute.

在示例中正在工作.请让我知道这是否适合您！

In the example is working. Please let me know if this works for you!

没有创建其他的CSS类，我只是对您的类做了一些修改.

No additional css classes were created, I just modified yours a little bit.

这是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背景图像并保持渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！