我有一个简短的建立一个 swish B&B 网站的简介 - 他们想要全宽背景图像，我使用媒体查询将其编码为封面图像，以节省在较小的屏幕上加载较大的图像..
从那以后，他们回过头来告诉我，他们希望背景图像在每页上的多个图像中旋转。我想延迟加载背景图像并每 15 秒左右创建一个漂亮的过渡，但我不确定采取的最佳方法或如何做到这一点并且仍然使用媒体查询 - 有没有人有任何经验类似的还是可以就一个好的方法提供任何建议？
它需要跨浏览器（ie8 plus）工作，理想情况下带宽使用有限..
干杯保罗
问问题
374 次
1 回答
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% 不透明度的图像。
此外，为避免发生转换时的网络延迟，您必须在页面中放置标签，但不显示它们（显示：无）。这将预加载图像并提供流畅的过渡。
希望它可以提供帮助。
于 2013-05-22T13:36:04.863 回答