如何将车身/Html背景与Ipad/Iphone中的CSS链接(safari)

Question

我正在配置404页。

在本页中，我只提供了一个“掩护”背景，使用：

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的所有屏幕。

但是..。因为这是404页--我写了一条信息：“点击这里返回家园。”

并创建一个“可点击的背景”：

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上--背景图像看起来更大，可能是原来尺寸的100% --而不是作为封面(因为没有第二个css代码就行了)。

但是“链接”很好。

唯一的问题是封面图片--在我的例子中，在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;
}

注意:根据丹尼尔下面的评论，为了使该解决方案正确运行，还需要删除html标记上的html声明。