css – 使用ios7固定背景图像

前端之家收集整理的这篇文章主要介绍了css – 使用ios7固定背景图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个项目,我正在使用固定的背景图像。它除了ios7以外的所有功能都很好用。在ipad上,背景图像被放大并模糊。这是我使用的CSS代码
.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

这是一个链接到实际页面 – www.wdeanmedical.com

我失踪了什么

解决方法

使用background-attachment:使用background-size:cover修复会导致大多数移动浏览器出现问题(如您所见)。您可以尝试使用background-attachment:scroll。这不会给你想要的效果,但你会看到图像至少。您可以使用一个或两个媒体查询来将其限制为平板电脑或手机的设备,方法是使用@media屏幕和(max-device-width:1024px){}

要么

您可以使用background-position:滚动并包含一些可将图像保持在滚动位置(保持在窗口顶部)的JavaScript:DEMO

猜你在找的CSS相关文章