0

そのため、クリックしたプレビュー画像/テキストに応じて背景画像が変化する 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>

どうもありがとう！

4

1 に答える 1

0

実行するときdocument.getElementById('bilder').style.background=は、css プロパティbackgroundだけでなく、サブ プロパティ、つまりbackground-size. を再定義しないbackground-sizeので、これはデフォルト ( auto) に戻されます。

代わりに使用document.getElementById('bilder').style.backgroundImageするので、他のサブプロパティをオーバーライドしていません。http://jsfiddle.net/8m7VB/3/

于 2014-01-01T22:08:57.210 に答える