css - css 背景=包含 URL 更改不能跨浏览器工作

Question

所以我有一个由 DIV 组成的画廊，它根据您单击的预览图像/文本更改背景图像。

由于图片尺寸不同，我选择使用“背景尺寸包含”.. 我的开关功能在 Safar 中完美运行，但在 Firefox 和 Chrome 中效果较差。

我做错了什么（为什么它只在 Safari 中正确显示）我需要如何更改我的代码？....或者有更好的方法吗？

http://jsfiddle.net/8m7VB/2/

<div id="bilder" style="position: absolute; bottom: 0px; left: 0px; width: 100%;
height: -moz-calc(100% - 170px); height: -webkit-calc(100% - 170px); height: -o-calc(100% - 170px);

background: url(https://www.google.de/logos/doodles/2013/holiday-series-2013-2-5173241802915840-hp.png) center bottom no-repeat; background-size: contain; z-index: 1;"></div>
<a onclick="document.getElementById('bilder').style.background='url(http://cdn3.spiegel.de/images/image-550112-thumb-fjcw.jpg) center bottom no-repeat'">google<a>
<a onclick="document.getElementById('bilder').style.background='url(http://cdn3.spiegel.de/images/image-549692-thumb-gsor.jpg) center bottom no-repeat'">bild<a>

太感谢了！

Answer 1

执行时document.getElementById('bilder').style.background=，您不仅要覆盖 css 属性background，还要覆盖子属性，即background-size. 您没有重新定义background-size，因此这将被设置回默认值 ( auto)。

我会document.getElementById('bilder').style.backgroundImage改用，所以你不会覆盖其他子属性。http://jsfiddle.net/8m7VB/3/