Hình nền không hiển thị trên thiết bị iPad và iPhone

Question

Tôi muốn tạo ra một phần với một nền tảng bao gồm nó trong một trang web di động, vì vậy tôi đã sử dụng mã CSS sau:

#section1{ 
    background: url("background1.png") auto 749px; 
    height: 749px; 
} 

Background được thể hiện một cách chính xác trên Android (Chrome, Firefox ...), nhưng nó không hiển thị ở tất cả trên iPhone hoặc iPad (Safari, Chrome iOS ...). Tôi đã cố gắng thiết lập các thuộc tính này bằng cách sử dụng jQuery khi DOM đã sẵn sàng, nhưng không có may mắn. Tôi đọc rằng kích thước có thể là một vấn đề, nhưng hình ảnh là khoảng 700kB (1124x749px) vì vậy nó sẽ hoàn thành các quy tắc Safari Web Content Guide. Đó là vấn đề?

Answer 1

Có một vấn đề với quy tắc CSS của bạn:

của bạn bằng cách sử dụng ký hiệu viết tắt trong đó background-size -property đến sau các background-position -property và nó phải được phân tách bằng một số /.

Những gì bạn đang cố gắng làm là đặt vị trí, nhưng nó sẽ thất bại vì auto không phải là giá trị hợp lệ.

Để có được nó để làm việc trong ký hiệu viết tắt nó phải giống như thế này:

background: url([URL]) 0 0/auto 749px; 

Cũng lưu ý rằng có một giá trị gọi là cover, mà có thể phù hợp và linh hoạt hơn ở đây:

background: url([URL]) 0 0/cover; 

Hỗ trợ cho background-size trong ký pháp viết tắt cũng không phải là rất rộng, vì nó được hỗ trợ trong Firefox 18+, Chrome 21+, IE9 + và Opera. Nó hoàn toàn không được hỗ trợ trong Safari. Về vấn đề này, tôi khuyên bạn nên luôn sử dụng:

background: url("background1.png"); 
background-size: auto 749px; /* or cover */ 

Dưới đây là một vài ví dụ và bản trình diễn để chứng minh hành vi đó. Bạn sẽ thấy rằng Firefox ví dụ hiển thị mọi hình ảnh ngoại trừ hình ảnh nắm tay. Safari mặt khác chỉ hiển thị cuối cùng.

CSS

section { 
    width: 200px; 
    height: 100px; 
    border: 1px solid grey; 
} 

#section1 { 
    background: url(http://placehold.it/350x150) auto 100px; 
} 

#section2 { 
    background: url(http://placehold.it/350x150) 0 0/auto 100px; 
} 

#section3 { 
    background: url(http://placehold.it/350x150) 0 0/cover; 
} 

#section4 { 
    background: url(http://placehold.it/350x150) 0 0; 
    background-size: cover; 
} 

Demo

Try before buy

Đọc thêm

MDN CSS reference "background"
MDN CSS reference "background-size"

< 'background-kích thước'>
Xem background-size. Thuộc tính này phải được chỉ định sau vị trí nền, được phân tách bằng ký tự '/'.

Answer 2

Sự cố không được giải quyết khi tôi cố gắng sử dụng đúng cách nền trong viết tắt. Nó hoạt động khi tôi chia tài sản nền:

#section1{ 
    background: url("background1.png"); 
    background-size: auto 749px; 
    height: 749px; 
} 

Answer 3

Tôi hy vọng điều này sẽ giúp ai đó tuyệt vọng. Trong trường hợp của tôi, nó là kích thước của hình ảnh quá lớn, vì vậy iPad chỉ không tải nó (và nó đã đúng thực sự).

Giảm kích thước và chất lượng đã giải quyết được vấn đề tải.

Answer 4

Tôi đã có thụt lề văn bản tiêu cực đã ném hình nền của tôi ra khỏi trang, vì vậy màu sắc: Trong suốt thì đó là.

Answer 5

Tôi không thấy ai nói cụ thể điều này, nhưng bạn cũng phải xác định chiều rộng. Kể từ đó, vì tôi đã đặt kích thước nền thành "chứa" - nó phải biết kích thước của vùng chứa là gì.

Khi tôi đã làm, nền được hiển thị như mong đợi.

@media only screen and (max-width:599px) { 
    [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; } 
} 

@media only screen and (max-width:479px) { 
    [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; } 
} 

Lưu ý: URL nền cần được xác định cho cả hai điểm ngắt để nó hoạt động cho iPhone 5 (iOS7).

Answer 6

Vấn đề của tôi là iOS không hỗ trợ background-attachment: fixed. Loại bỏ dòng đó làm cho hình ảnh xuất hiện.

Dường như có cách giải quyết cho một hình ảnh nền cố định mặc dù: How to replicate background-attachment fixed on iOS

Answer 7

Giảm kích thước hình ảnh nếu không có gì khác hoạt động - iOS không thích kích thước hình ảnh lớn trên di động và chỉ đơn giản là sẽ không hiển thị hình ảnh nếu nó quá lớn.

Các nguyên tắc cơ bản tuyệt vời của @insertusernametại đây! Không có vấn đề gì tôi đã làm tôi không thể có được hình ảnh của tôi để hiển thị ... cho đến khi, tôi đã trở lại vấn đề cơ bản. Kích thước hình ảnh quá lớn và iPhone không thích tải hình ảnh có kích thước đó, trên 700kbs. Vì vậy, tôi giảm nó xuống còn 32kb và chúng tôi đã hành động.

Answer 8

Thêm một background-color giải quyết vấn đề của tôi

background-color: #F4F4F2;