所以我有一个由 DIV 组成的画廊，根据您单击的预览图像/文本更改背景图像。
由于图片尺寸不同，我选择使用“背景尺寸包含”..我的切换功能在 Safar 中运行完美，但在 Firefox 和 Chrome 中效果不佳。
我做错了什么(为什么它只在 Safari 中正确显示)我需要如何更改我的代码？ .... 或者有更好的解决方法吗？
<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>
感谢一百万!
最佳答案
执行 document.getElementById('bilder').style.background= 时，您不仅要覆盖 css 属性 background，还要覆盖子属性，即 背景大小。您没有重新定义 background-size，因此这将设置回默认值 (auto)。
我会改用 document.getElementById('bilder').style.backgroundImage，这样您就不会覆盖其他子属性。 http://jsfiddle.net/8m7VB/3/
关于css 背景=包含 URL 更改无法跨浏览器工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20873714/