2010-07-23 44 views
6

Tôi hoàn toàn bối rối và tự hỏi liệu tôi có thiếu gì đó đơn giản không, nhưng tôi không thể hiển thị hình nền trên iPad hoặc trong trình mô phỏng ipad.Hình nền CSS không hiển thị trên ipad

Là một thử nghiệm tôi cùng nhau đưa các trang đơn giản sau đây:

<html> 
<head></head> 
<body> 
    <img src="content_box_black_background.png" /> 
    <div style="height: 100px; width: 500px; background:url(content_box_black_background.png);"> 
    </div> 
</body></html> 

Là một thử nghiệm Tôi cũng xuất ra hình ảnh trực tiếp trên khối div. Trong chrome cả hai xuất hiện nhưng trong giả lập ipad không làm. Bất kỳ ý tưởng?

+0

Nếu cả hai đều xuất hiện trong chrome, và không xuất hiện trong mô phỏng, sau đó tôi không nghi ngờ rằng bạn cố gắng sử dụng nó như là một hình ảnh "nền" có liên quan đến vấn đề của bạn. Có vẻ như người mô phỏng không chọn đường dẫn đến hình ảnh. – ScottS

+0

Nhìn sang tôi. Tôi sẽ thử một vài điều mặc dù, có thể giả lập là lỗi: url ('content_box_black_background.png'); hoặc url ('./content_box_black_background.png '); –

+0

Trình mô phỏng iPad nào? Bạn có thể đặt trong một liên kết đến nó? – Zabba

Trả lời

0

tôi đã không kiểm tra này, nhưng tôi có một vài ý tưởng mà bạn nên thử nghiệm:

1) như thế nào các tệp được đặt trên "ổ đĩa cục bộ" của iPad? bạn không có bất kỳ HTTP, vì vậy tôi giả sử bạn có hình ảnh trên đĩa cứng "" (RAM) - cố gắng để mở tập tin trực tiếp trong trình duyệt, nó có hiển thị/tải xuống không?

2) Thử thêm: "display: block;" để hiển thị CSS của bạn. Có thể làm thủ thuật

3) Thẻ IMG, thử thêm chiều rộng và chiều cao, nó có thay đổi gì không?

4) Bạn đang sử dụng loại tệp PNG nào? 8-bit hoặc 24-bit?

5) Điều gì xảy ra nếu bạn sử dụng GIF hoặc JPG thay thế?

6) khi sử dụng hình nền. Hãy thử sử dụng định dạng dài cho các thuộc tính. "background-image: url (image.jpg);".

7) Đồng thời thử thêm <!DOCTYPE html> để trình duyệt chuyển sang chế độ HTML5.

+1

Cảm ơn lời đề nghị. Thường thì phải mất một danh sách các kiểm tra đơn giản để giúp sắp xếp mọi thứ. Tôi không thể thử từng gợi ý, nhưng tôi chắc chắn nó sẽ là một trong số đó (rất có thể là định dạng PNG tôi đã sử dụng trên một hình ảnh cụ thể). Cảm ơn vì đầu vào của bạn. RAM –

+1

RAM là bộ nhớ hệ thống, trong khi đĩa cứng là để lưu trữ tệp - chúng hoàn toàn không có liên quan ở các cấp độ khác nhau. – Christian

+0

@Christian - Tôi đã đăng "ổ cứng" dưới dạng "tương tự". Tôi biết sự khác biệt giữa Flash RAM, RAM, Harddrives vv là gì. Không cần phải bỏ phiếu cho câu trả lời của tôi vì tôi so sánh bộ nhớ trong với ổ cứng. Đó là những gì hầu hết mọi người được sử dụng để từ các máy tính bình thường. Tôi đã có máy tính đầu tiên của mình vào năm 1987, vì vậy hãy hiểu nó có ý nghĩa giống như một điểm tương đồng của sacke so sánh và giải thích. – BerggreenDK

-3

luôn đặt dấu ngoặc kép quanh url của bạn và một trong hai đầy đủ url("http://example.com/folder/file.htm") hoặc ít nhất là dấu gạch chéo url("/file.htm")

+0

nếu không có dấu cách, dấu ngoặc kép KHÔNG cần thiết. Lấy làm tiếc. – BerggreenDK

+1

um, thói quen lập trình tốt? – isildur4

+1

Báo giá hoàn toàn không cần thiết nếu không có khoảng trắng và áp dụng cho url đầy đủ chỉ định, tại sao bạn thực sự muốn điều đó? CSS đọc realtive của url với đường dẫn riêng của nó. I E. Nếu * .css * của bạn nằm bên trong '/styles' và hình ảnh bên trong' /styles/images' bạn sẽ sử dụng url trong CSS như 'url (images/ .extension)' và nó sẽ hoạt động hoàn hảo! – jolt

27

Nó có thể liên quan đến kích thước của hình ảnh. Safari Web Content Guide đề cập rằng kích thước tối đa cho hình ảnh GIF, PNG và TIFF là 3 megapixel (3 * 1024 * 1024). Tôi chạy vào một vấn đề tương tự hiển thị một menu dựa trên CSS sprites. Tôi đã phải thu nhỏ hình ảnh khá lớn (3000x1500) trước khi bất kỳ sprites nào sẽ hiển thị trên iPad.

+1

điều này giải quyết được một vấn đề tôi gặp phải với trang web ipad của tôi - cảm ơn rất nhiều :) – boz

+0

Tôi đã gặp vấn đề tương tự. Nếu bạn đang sử dụng một sprite, hãy chắc chắn 'chiều rộng và chiều cao của nó càng nhỏ càng tốt. Kích thước sprite của tôi chỉ khoảng 130k và iPad 2 vẫn không hiển thị vì chiều rộng là 4000 pixel. – Shahar

0

Trong một số cài đặt chủ đề dành cho thiết bị di động, bạn sẽ thấy "thu nhỏ hình ảnh lớn trong các bài đăng hoặc trang để vừa với màn hình nhỏ hơn." kiểm tra để bật/tắt nó. Và tắt nó ..

Hy vọng điều này sẽ giải quyết được vấn đề của bạn.

3

IPAD không thích cover trong viết tắt nền. Nếu bạn đang sử dụng vỏ làm điều đó trên một dòng mới

-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
Các vấn đề liên quan