滑动菜单，背景模糊

Question

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

请参阅附件http://jsfiddle.net/h863x/2/

单击红色框时，菜单将滑出并且菜单背景会模糊，这是因为它是从ID＃Hero-container继承的图像，并添加了一个模糊。

现在，如果您单击此小提琴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');
}

这是可能的，您可以通过版本提供和示例吗？

Answer 1

您可以添加此位代码以更改触发元素的单击背景：

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