Question

所以我有一个由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>

感谢百万！

Answer 1

执行document.getElementById('bilder').style.background=时，您不仅会覆盖css属性background，还会覆盖子属性，即background-size。您不会重新定义background-size，因此会将其设置为默认值（auto）。

我会使用document.getElementById('bilder').style.backgroundImage代替，因此您不会覆盖其他子属性。 http://jsfiddle.net/8m7VB/3/

css background =包含URL更改无法跨浏览器工作

1 个答案: