如何在 Ipad/Iphone (safari) 中 link Body/Html CSS 背景

Question

我正在配置我的 404 页面。

在这个页面我只放了一个 "COVER" 背景使用：

html { 
  background: url(../img/404.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  overflow: hidden;
}

没问题.. 404.jpg 图像覆盖 IE、Edge、Chrome 和 IPAD/IPHONE Safari 中的所有屏幕。

但是..因为这是一个 404 页面 - 我发了一条消息："CLICK HERE TO RETURN HOME."

并用这个创建一个 "Clickable Background"：

html #background-link {
position: absolute;
height:11000px;
text-indent:-9999px;
width:1440px;
top: 0; left: 0;
border: 0;
float: left;
}

在 IE、Edge 上工作正常，Chrome..

但是.. 在 IPAD/IPHONE Safari 上 - 背景图像看起来更大，可能是其原始大小的 100% - 而不是作为封面（因为没有第二个 css 代码）。

但是 "link" 工作正常。

唯一的问题是封面图片 - 就我而言，在 IE/EDGE/CHROME 上，我看到蓝屏背景前面有一个男人。 IPAD/IPHONE 我只看到蓝屏背景 - 在这种情况下，左上角..不是作为封面的图像。

Answer 1

这是因为您为 #background-link 选择器提供的尺寸；它们比您正在查看的设备的屏幕尺寸大，迫使页面尺寸增大以容纳它们。

一种解决方案是为所有四个定位属性提供值，而不是提供明确的大小，如下所示：

#background-link{
    border:0;
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    text-indent:-9999px;
    top:0;
}

注意：根据下面 Daniel 的评论，html 标记上的 overflow:hidden 声明也需要删除才能使此解决方案正常运行。

如何在 Ipad/Iphone (safari) 中 link Body/Html CSS 背景

How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

html

css

background-image

mobile-safari