调整浏览器宽度时消失背景图像

Question

我有一个带有两个背景图片的侧边栏。以下是我的CSS：

background-color: #fff;
background-image: url('img/back-1.png'), url('img/back-2.png');
background-position: left top, left top;
background-repeat: no-repeat, repeat-y;
background-size: 100% auto, 100% auto;

当我使用鼠标更改浏览器的宽度时（我使用响应式设计），在某些位置上第二个图像会消失。但如果我刷新页面或更改宽度，一切都会恢复。您有任何想法为什么图像会消失吗？

- 6mudla

---

你正在将第一张图片的大小设置为100％，因此它覆盖了整个浏览器页面...而第二张图片被推下去了。因此它似乎消失了。 - ygssoni

你在哪个浏览器上测试了这个？你的问题有在线示例吗？也许你可以创建一个Fiddle。 - Jasper de Vries

@JasperDeVries：就目前而言，这个问题的回答很难。你能补充一些细节吗？添加一些html和（链接到）样本图像，使问题包含一个简短但可工作的示例。解释您所说的“某些位置”。同时在fiddle中添加示例。 - Jeroen

只有一个背景图片出现了相同的问题。 - Liron Harel

我的问题已经解决了，我将背景图片放在背景大小的下方，需要将其放在上方。 - Liron Harel

Answer 1

我曾经遇到过类似的问题，
我创建了两个CSS类，
通过JavaScript检测浏览器宽度，
然后通过JavaScript将正确的类附加到元素上。

- Mehdi Ghanavatian