旧帖子，但这将允许你使用图像精灵和调整重复，以及通过使用css属性的速记(背景，重复，左上角)的定位。

$.each($('.smallPreview'), function(i){
  var $this = $(this);

  $this.mouseenter(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
  });

  $this.mouseleave(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
  });

});

使用jQuery有两种不同的方法来更改背景图像CSS。

$('选择'). css(“分辨率”,“url(图片/ example.jpg)”); $('选择'). css({“背景图像”:“url(图片/ example.jpg)”});

仔细观察，注意不同点。在第二种方法中，您可以使用传统的CSS并将多个CSS属性串在一起。

$('#divID').css("background-image", "url(/myimage.jpg)");  

应该这样做，只是在元素上的点击事件中连接它吗

$('#divID').click(function()
{
  // do my image switching logic here.
});

一种方法是把两个图像放在HTML中，在SPAN或DIV中，你可以用CSS隐藏默认值，或者用JS隐藏页面加载。然后你可以切换到点击。下面是一个类似的例子，我用来把左/下图标放在列表上:

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

旧帖子，但这将允许你使用图像精灵和调整重复，以及通过使用css属性的速记(背景，重复，左上角)的定位。

$.each($('.smallPreview'), function(i){
  var $this = $(this);

  $this.mouseenter(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
  });

  $this.mouseleave(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
  });

});

我总是使用时间戳来防止浏览器缓存图像。例如，如果用户正在旋转他们的头像，它通常会被缓存并且看起来没有改变。

var d = new Date();
var t = d.getTime();

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");