相关疑难解决方法(0)

我有这个HTML:

<div id="graphic">lorem ipsum</div>

用这个CSS:

#graphic { background-image: url(image.jpg); width: 200px; height: 100px;}

我正在应用的背景图像是200x100像素,但我只想显示200x50像素的背景图像的裁剪部分.

background-clip似乎不是正确的CSS属性.我可以用什么呢？

background-position 不应该使用,因为我在精灵上下文中使用上面的CSS,其中我想要显示的图像部分小于定义CSS的元素.

我正在尝试在我创建的网站上创建淡入/淡出效果(编辑:网站网址已删除)

一切都很好,除非你点击调色板中的一种颜色,它取代图像没有任何效果.

这是我写的小脚本,它是在其中一种颜色上触发的.

function changeImage(newColor) {

    //var previousImage = $('#image-holder').css("background-image");

    $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");
};

我试过玩,$('#image-holder').fadeOut(1500)然后$('#image-holder').fadeIn(1500)它的行为很有趣......它使图像双重淡化.

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()});

我想要实现的是在彩色框上单击,当前背景图像将淡出,而新背景图像将淡入.

我知道如果我使用两个<img src="" />并切换它们的显示/可见性就更容易实现,但遗憾的是我无法改变HTML,所以我正在寻找基于jQuery的解决方案.

感谢帮助!