嗨，我的頁面上有幾個div，它們的背景圖像需要擴展以覆蓋整個div，而整個div又可以擴展為填充視口的寬度。顯然background-size: cover在iOS設備上的行為異常。我已經看到了一些修復方法的示例，但我無法使其在我的情況下起作用。理想情況下，我寧愿不要<img>在HTML中添加額外的標簽，但是如果這是唯一的方法，那我會的。這是我的代碼：.section { margin: 0 auto; position: relative; padding: 0 0 320px 0; width: 100%;}#section1 { background: url(...) 50% 0 no-repeat fixed; background-size: cover;}#section2 { background: url(...) 50% 0 no-repeat fixed; background-size: cover;}#section3 { background: url(...) 50% 0 no-repeat fixed; background-size: cover;}<body> <div id="section1" class="section"> ... </div> <div id="section2" class="section"> ... </div> <div id="section3" class="section"> ... </div></body>問題是，考慮到瀏覽器的可變寬度和div中內容的可變高度，我如何才能使背景圖像完全覆蓋div部分？
3 回答
四季花海
TA貢獻1811條經驗 獲得超5個贊
我最近有一個類似的問題，并且意識到這不是由于background-size:cover而是background-attachment:fixed。
我通過使用針對iPhone的媒體查詢并將background-attachment屬性設置為來解決了該問題scroll。
就我而言：
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
@media (max-width: @iphone-screen) {
background-attachment: scroll;
}
}
編輯：該代碼塊位于LESS中，并為假定了預定義變量@iphone-screen。
楊魅力
TA貢獻1811條經驗 獲得超6個贊
這適用于Android 4.1.2和iOS 6.1.3（iPhone 4）以及臺式機開關。為響應性網站而寫。
以防萬一，在您的HTML頭中，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML：
<div class="html-mobile-background"></div>
CSS：
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
@media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
- 3 回答
- 0 關注
- 540 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消