Sử dụng nền đính kèm: cố định trong safari trên ipad

Tôi đang tìm cách tạo lại hiệu ứng tương tự với ứng dụng khoa học phổ biến. Về cơ bản có một hình nền lớn và sau đó có lớp HTML/CSS trên đó. Khi người dùng cuộn nội dung, thì vị trí nền của hình ảnh sẽ vẫn được giữ nguyên và không cuộn.Sử dụng nền đính kèm: cố định trong safari trên ipad

Rõ ràng là trong một trình duyệt 'thông thường', tôi sẽ sử dụng nền đính kèm: cố định, nhưng điều này dường như không hoạt động trên iPad. Tôi biết vị trí: cố định không hoạt động như bạn có thể mong đợi theo đặc điểm safari - nhưng có cách nào để đạt được điều này không?

Nguồn

2010-06-10 chris_bcn

có thể trùng lặp của [hình nền cố định với iOS7] (http://stackoverflow.com/questions/20443574/fixed-background- image-with-ios7) –

Tôi tin rằng bạn có thể đặt hình nền trong div và đặt chỉ mục z xuất hiện phía sau nội dung khác. Sau đó, bạn có thể sử dụng javascript để sửa vị trí của div chứa hình nền.

Nguồn

2011-08-05 05:12:02 Alexander

Di động safari quy mô toàn bộ trang web của bạn xuống còn kích thước khung nhìn, bao gồm hình nền. Để đạt được hiệu quả đúng, sử dụng tài sản -webkit-background-kích thước CSS để khai báo kích thước nền của bạn:

-webkit-background-size: 2650px 1440px;

(tip mũ để commenter Mac)

Nguồn

2011-08-11 20:55:54 codewrangler

Không hoạt động, đã thử trên iPad 1. –

Nó đã giải quyết được sự cố của tôi trên IPad3 Retina/IOS8. Cảm ơn –

Bạn có thể sử dụng mã này để tạo ra một nền cố định lớp để hack vấn đề này.

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: 100%; 
    background-image: url('xx.jpg'); 
    background-attachment: fixed; 
}

Và đặt <div id="background_wrap"></div> vào <body></body>

<body> 
<div id="background_wrap"></div> 
</body>

Nguồn

2012-10-07 16:17:31 Angolao

giải pháp tiếp theo trong Css:

body { 
    background-image: url(../images/fundobola.jpg); 
    background-position: top center;background-repeat:no-repeat; 
    background-size: 1900px 1104px; 
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll; 
}

--- không sử dụng ---- (nguyên nhân: di chuyển vô hiệu hóa)

position: fixed

Được giải quyết trong Ipad và iPhone

Nguồn

2012-10-12 14:21:47

... nhưng '-moz-' là tiền tố của Mozilla, không phải iPhone (= Webkit)? –

Không hoạt động. Ngoài ra những gì có 'font-family: Arial;' và lề trên cơ thể phải làm gì với giải pháp? – Rocco

Mở rộng câu trả lời của Anlai ở trên, tôi thấy rằng giải pháp đã lặp lại hình ảnh của tôi khi tôi đang cuộn thay vì giữ cố định. Nếu bất kỳ ai khác có vấn đề này, CSS của tôi cho ID background_wrap như sau:

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: cover; 
    background-image: url('../images/compressed/background-mobile.png'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
}

Chỉ cần thay đổi kích thước nền và ảnh nền để làm cho hình ảnh tĩnh.

Nguồn

2015-01-13 09:39:46 lg365

Tôi không phải là người chuyên nghiệp, nhưng tôi đã giải quyết được vấn đề này trong câu hỏi của chúng tôi. Nó khá đơn giản) Đây là mã:

\t jQuery(window).scroll(function(){ 
 
\t \t var fromtop = jQuery(window).scrollTop(); 
 
\t \t jQuery(" your element ").css({"background-position-y": fromtop+"px"}); 
 
\t });

Nguồn

2017-01-25 21:34:25 John

Sử dụng nền đính kèm: cố định trong safari trên ipad

Trả lời

Các vấn đề liên quan