2012-01-19 11 views
7

Tôi đang thực hiện một ứng dụng iPhone bằng cách sử dụng Phonegap & cũng sử dụng điện thoại di động jquery. Tôi muốn đặt hình nền cho data-role = div trang. Trong chiều cao của trang này bằng với màn hình & do đó nền được đặt thành kích thước của màn hình. Nhưng độ dài nội dung trang lớn hơn nhiều so với màn hình & do đó nền màu xám được nhìn thấy sau khi hình ảnh hoàn tất. Câu hỏi của tôi là liệu có cách nào để chúng tôi có thể giữ hình nền được cố định & cuộn hoặc di chuyển nội dung chỉ của trang & không phải hình nền. Chỉ cần đề cập đến tôi đã thử full size background jquery pluggin. Nó hoạt động trên Android nhưng không hoạt động trên iOS.Làm cách nào tôi có thể đặt hình nền Vị trí cố định trong điện thoại di động jquery cho ứng dụng iPhone bằng cách sử dụng Phonegap

Mọi người có thể giúp bạn không? Cảm ơn trước.

Trả lời

9

Ok, vì vậy, thay vào đó, những gì tôi đã làm là tạo phần tử cố định trong phần tử nội dung của trang. Vì vậy, nó sẽ trông như thế

<body> 
    <div id="background"></div> 
    ... 
</body> 

Và đối với CSS tôi tuyên bố như sau:

#background { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important; 
    background-size:contain; 
} 

Và điều này đã làm các trick cho tôi. Hy vọng rằng nó sẽ giúp (ai đó ngoài kia: P)

+1

Điều này làm việc cho tôi trong chrome, nhưng không phải iOS. –

3

Bạn đang tìm kiếm background-attachment thuộc tính.

div[data-role="page"]{ 
    background-attachment: fixed; 
} 

Cập nhật:
background-attachment:fixed được hỗ trợ từ iOS 5, nếu bạn sử dụng phiên bản cũ của iOS bạn có thể cân nhắc sử dụng iScroll.

+0

cám ơn nhưng điều này cũng không làm việc . – Sayali

+0

Nó hoạt động bắt đầu từ iOS5, nếu bạn sử dụng phiên bản cũ hơn của phiên bản WebKit iOS được Safari sử dụng không hỗ trợ 'background-attachment: fixed' –

+0

Ya nó hoạt động trên iOS 5. Tôi muốn nó hoạt động trên iOS 4.2 hoặc 4.3 – Sayali

0

Bạn có thể thiết lập hình nền của bạn vào trang jQuery:

.ui-page { background-image:url(../ios/sample~ipad.png); 
background-repeat:no-repeat; background-position:center center; 
background-attachment:scroll; background-size:100% 100%; } 
0

bạn có thể thử này:

.ui-mobile 
.ui-page-active{ 

display:block; 
overflow:visible; 
overflow-x:hidden; 

} 

hoạt động tốt đối với tôi.

0

Hãy thử với điều này, công việc này cho tôi.

position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background: url(../Images/loginBackground.jpg) 0 0 fixed !important; 
background-size:100% 100%; 
background-repeat: no-repeat; 
0
<body> 
    <div id="background"></div> 
    ... 
</body> 

css:

#background { 
    background-image: url("/images/background.png"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background-position: 0 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

@media screen and (max-width: 480px) { 
    #background { 
     background-attachment: initial !important; 
    } 
} 

Vấn đề là thiết bị di động iOS có lỗi render đồng thời background-size:cover;background-attachment:fixed; vì vậy bạn phải sửa chữa nó bằng cách @media