javascript - 背景模糊的滑动菜单

Question

我创建了一个背景模糊的幻灯片菜单，当它只是一个静态图像时它工作正常但是当它与幻灯片一起使用时它显示错误的图像。

请参阅随附的 fiddle http://jsfiddle.net/H863X/2/

当你点击红框的时候，菜单会滑出，菜单背景会变模糊，这是因为它继承了id #hero-container的图片，加了一层模糊。

现在如果你点击这个 fiddle http://jsfiddle.net/H863X/1/

您会注意到图像已被替换为黑色图像，但如果您单击红色按钮，幻灯片仍会显示原始图像，这是因为它仍然从 id #hero-container 继承图像，请参阅以下代码用于 css 中的图像链接。

#hero-container {
    background: url(http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
    background-size: cover;
}

我需要幻灯片来显示列表项中的图像，即黑色图像，请参见下面的 css。

.hero li:nth-child(1) span { 
    background-image: url('http://dummyimage.com/600x400/000/fff.jpg');
}

这可能吗？您能提供 fiddle 版本的示例吗？

Answer 1

您可以添加这段代码来更改点击触发元素时的背景:

 $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)');