我有一個正在使用固定背景圖像的項目。它對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 回答
慕神8447489
TA貢獻1780條經驗 獲得超1個贊
使用background-attachment: fixedwith background-size: cover會導致大多數移動瀏覽器出現問題（如您所見）。您可以嘗試使用background-attachment: scroll。這不會達到您想要的效果，但是您至少會看到這些圖像。您可以使用一兩個媒體查詢，將其限制為平板電腦或手機上的設備@media screen and (max-device-width: 1024px){}
要么
您可以使用background-position: scroll并包含一些JavaScript，它將圖像保持在滾動位置（將其保持在窗口頂部）：DEMO
慕雪6442864
TA貢獻1812條經驗 獲得超5個贊
知道這是一個舊線程，但想提供一個基于@ Cruz-Nunez的解決方案的更新解決方案
依賴視口大小可能會失敗。例如，僅靠767像素的視口在iPad上不起作用，而增大尺寸則否定了這種方法的優勢。
相反，您可以檢查設備是否具有懸停功能，如果沒有，則可以像這樣覆蓋：
@media (hover: none) {
.homeHero {
background-attachment: initial;
}
}
您還可以檢查設備是否具有路線指示器（例如，手指）而不是精細的指示器（例如，鼠標）：
@media (pointer: coarse) { ... }
- 3 回答
- 0 關注
- 544 瀏覽
添加回答
舉報
0/150
提交
取消