如何在Ipad/Iphone（safari）中鏈接Body/Html背景與CSS

我正在配置我的404頁面。如何在Ipad/Iphone（safari）中鏈接Body/Html背景與CSS

在這個頁面只把「封面」的背景使用：

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中，邊緣，Chrome和IPAD/IPHONE的Safari。

但是..因爲這是一個404頁面 - 我放了一條消息：「點擊這裏返回首頁。」

，並創建一個「可點擊背景」與此：IE上，邊緣

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

工作正常，鉻..

但..上IPAD/IPHONE Safari瀏覽器 - 背景圖像出現更大，可能與它的原始大小的100％ - 而不是作爲封面（作品沒有第二個CSS代碼）。

但「鏈接」工作正常。

唯一的問題是封面圖片 - 在我的情況下，在IE/EDGE/CHROME上我看到一個男人在藍色背景前面。在IPAD/IPHONE上，我只看到一個藍色背景 - 在這種情況下，左上角..而不是圖像作爲封面屏幕。

來源

2016-04-26 DANIEL

您可以通過將'fixed'屬性'background-attachment'更改爲'local'或'initial'來解決這個問題。 iOS不喜歡混合'background-size：cover;'和'background-attachment：fixed;' – Frits

這是因爲您爲#background-link選擇器提供的尺寸;它們大於您正在查看的設備的屏幕大小，從而迫使頁面的大小增大以適應它們。

一種解決方案是不是提供明確的尺寸，爲所有四輪定位提供屬性值，像這樣，：

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

注：按下面丹尼爾的評論中，overflow:hidden聲明對html標籤也將需要刪除才能使此解決方案正常工作。

來源

2016-04-26 08:14:26 Shaggy

Tks @shaggy！非常適合！唯一的問題是 - 如果我在CSS中保留'overflow：hidden'，它仍然不能在Ipad/Iphone中工作 - 但是，對於您的解決方案，我不需要溢出來阻止垂直滾動。（只是爲了告知是否有人在將來嘗試這種解決方案 - 刪除'overflow：hidden'！） – DANIEL

謝謝@DANIEL，我已經更新了我的回答並附上了一個相應的說明。 – Shaggy

如何在Ipad/Iphone（safari）中鏈接Body/Html背景與CSS

回答

相關問題