与ios7固定的背景图片 [英] Fixed background image with ios7

问题描述

我有我使用的是固定的背景图像的项目。它在除ios7一切都很正常。在iPad上的背景图像被放大和模糊。这里是CSS code我使用 -

I have a project that I am using the fixed background image. It works great on everything except ios7. On the ipad the background image is zoomed in and blurry. Here is the CSS code I am using -

.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

here is a link to the live page - www.wdeanmedical.com

我是什么失踪？

推荐答案

使用背景附件：固定与背景大小：覆盖导致大多数移动浏览器的问题（如你看到的）。您可以尝试使用背景附件：滚动。这不会给你想要的效果，但你至少可以看到图像。你可以使用一个媒体查询或两个限制它的使用是平板电脑或手机设备 @media屏（最大设备宽度：1,024）{}

Using background-attachment: fixed with background-size: cover causes issues on most mobile browsers (as you've seen). You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}

或

您可以使用背景位置：滚动，包括一些JavaScript，将保持图像的滚动位置（把它放在窗口的顶部）：<强> 演示

You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO

这篇关于与ios7固定的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！