为了账号安全,请及时绑定邮箱和手机立即绑定

使用ios7修复了背景图片

使用ios7修复了背景图片

慕田峪9158850 2019-10-29 12:55:56
我有一个正在使用固定背景图像的项目。它对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我想念什么?
查看完整描述

3 回答

?
蝴蝶不菲

TA贡献1810条经验 获得超4个赞

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


要么


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


查看完整回答
反对 回复 2019-10-29
?
眼眸繁星

TA贡献1873条经验 获得超9个赞

知道这是一个旧线程,但想提供一个基于@ Cruz-Nunez的解决方案的更新解决方案


依赖视口大小可能会失败。例如,仅靠767像素的视口在iPad上不起作用,而增大尺寸则否定了这种方法的优势。


相反,您可以检查设备是否具有悬停功能,如果没有,则可以像这样覆盖:


@media (hover: none) {

   .homeHero {

       background-attachment: initial;

   }

}

您还可以检查设备是否具有路线指示器(例如,手指)而不是精细的指示器(例如,鼠标):


@media (pointer: coarse) { ... }


查看完整回答
反对 回复 2019-10-29
  • 3 回答
  • 0 关注
  • 584 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信