我有一个简短的建立一个嗖嗖的B＆amp; B网站 - 他们想要全宽背景图像，我使用媒体查询编码为封面图像，以节省在较小的屏幕上加载较大的图像..
他们已经回到我这里说他们希望背景图像在每页上旋转几张图像。我想懒得加载背景图片，并且每15秒左右创建一个漂亮的过渡，但我不确定最好的方法，或者我如何做到这一点仍然使用媒体查询 - 有没有人有任何经验类似的还是可以就良好的方法提出任何建议？
它需要跨浏览器（ie8 plus）工作，理想情况是有限的带宽使用..
干杯 保罗
答案 0 :(得分：0)
如果您需要此功能以符合IE8，那么您不能使用媒体查询，因为它是CSS3而IE8不处理它。
你可以做的是使用jQuery动画，玩图像不透明度来产生过渡。您可以在此网站上看到此类示例：http://www.mymms.co.uk/occasions/wedding.aspx 当悬停左侧菜单项时，背景图像会发生变化。
这是使用每个背景图像的一个div，并且所有div显示在相同位置（叠加），然后将前景图像从100％不透明度淡化到0％不透明度，同时褪色背景图像来自0％不透明度至100％不透明度;你可以获得漂亮的过渡，你甚至可以设置渐变时间： http://api.jquery.com/fadeTo/
您可能还需要相应地设置z-index，以获得100％不透明度图像。
此外，为避免发生转换时出现网络延迟，您必须在页面中放置标记，但不显示它们（显示：无）。这将预加载图像并提供流体过渡。
希望它可以提供帮助。