2010-07-23 10 views
6

Jestem całkowicie zdezorientowany i zastanawiam się, czy po prostu brakuje mi czegoś prostego, ale nie mogę wyświetlić obrazu tła na iPadzie lub w symulatorze iPada.Obrazy tła CSS nie są wyświetlane na iPadzie

Jako test ułożyła następującą prostą stronę:

<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> 

jako test Jestem również wyprowadzanie obrazu bezpośrednio nad blokiem DIV. W chrome pojawiają się oba, ale w symulatorze ipad też nie. Jakieś pomysły?

+0

Jeśli oboje pojawiają się w Chrome i nie pojawiają się w symulatorze, to ja nie podejrzewam, że starasz się używać go jako „tło” obraz ma cokolwiek wspólnego z twoim problemem. Wygląda na to, że symulator nie podniósł ścieżki do obrazu. – ScottS

+0

Patrz do mnie. Spróbowałbym jednak kilku rzeczy, być może symulator jest wadliwy: url ("content_box_black_background.png"); lub adres URL ("./content_box_black_background.png "); –

+0

Jaki symulator iPada? Czy mógłbyś umieścić w nim link? – Zabba

Odpowiedz

0

Nie Testy te, ale mam kilka pomysłów ty powinien przetestować:

1) W jaki sposób pliki umieszczone na "lokalnym dysku" iPada? nie masz żadnego HTTP, więc zakładam, że masz obraz na "harddrive" (RAM) - spróbuj otworzyć plik bezpośrednio w przeglądarce, czy pokazuje/pobiera?

2) Spróbuj dodać: "display: block;" do renderowania CSS. Może się zdarzyć:

3) Tag IMG, spróbuj dodać szerokość i wysokość, czy to coś zmienia?

4) Jakiego rodzaju pliku PNG używasz? 8-bitowy lub 24-bitowy?

5) Co się stanie, jeśli zamiast tego użyjesz pliku GIF lub JPG?

6) podczas korzystania z obrazów tła. Spróbuj użyć długiego formatu dla atrybutów. "background-image: url (image.jpg);".

7) Spróbuj również dodać <!DOCTYPE html>, aby przeglądarka przeszła w tryb HTML5.

+1

Dzięki za sugestie. Często zajmuje ona listę prostych kontroli, które pomagają rozwiązać problem. Nie mogę jeszcze wypróbować każdej z sugestii, ale jestem pewny, że będzie to jedna z nich (najprawdopodobniej format PNG, którego użyłem na konkretnej grafice). Dzięki za wkład. –

+1

Pamięć RAM jest pamięcią systemową, podczas gdy dyski twarde służą do przechowywania plików - są całkowicie niepowiązane na różnych poziomach. – Christian

+0

@ Christiana - opublikowałem "dysk twardy" jako "podobieństwo". Wiem, jaka jest różnica pomiędzy pamięcią Flash RAM, RAM, Harddrive itp. Nie muszę głosować na moją odpowiedź, ponieważ porównuję pamięć wewnętrzną z dyskiem twardym. To jest to, do czego większość ludzi używa zwykłych komputerów. Dostałem swój pierwszy komputer w 1987 roku, więc proszę, zrozumcie, że miało to być podobieństwo do porównań i wyjaśnień. – BerggreenDK

-3

zawsze umieścić w cudzysłowie adresu URL i albo pełny url("http://example.com/folder/file.htm") lub przynajmniej ukośnik url("/file.htm")

+0

jeśli nie ma spacji, cytaty NIE są potrzebne. Przepraszam. – BerggreenDK

+1

um, dobry nawyk programowania? – isildur4

+1

Cytaty są całkowicie niepotrzebne, jeśli nie ma spacji, a to samo dotyczy pełnego określenia adresu URL, dlaczego tak naprawdę tego chcesz? CSS odczytuje adres URL adresu URL na własną ścieżkę. TO ZNACZY. Jeśli twoje * .css * znajduje się wewnątrz '/styles' i obrazów wewnątrz' /styles/images' użyjesz adresu URL w CSS, takiego jak 'url (images/ .extension)' i to by działało idealnie! – jolt

27

Może to być związane z wymiarami obrazu. W dokumencie Safari Web Content Guide podano, że maksymalny rozmiar obrazów GIF, PNG i TIFF to 3 megapiksele (3 * 1024 * 1024). Wpadłem na podobny problem, wyświetlając menu oparte na sprite'ach CSS. Musiałem zmniejszyć dość duży obraz (3000x1500), zanim którykolwiek z duszków wyświetli się na iPadzie.

+1

rozwiązało to problem, który miałem z moją stroną na ipad - wielkie dzięki :) – boz

+0

Miałem ten sam problem. Jeśli używasz duszka, upewnij się, że jego szerokość i wysokość są tak minimalne, jak to tylko możliwe. Mój rozmiar sprite'a wynosił tylko około 130 tys., A iPad 2 go nie pokazywał, ponieważ jego szerokość wynosiła 4000 pikseli. – Shahar

0

W niektórych ustawieniach kompozycji mobilnej można "zmniejszyć duże obrazy w obrębie wpisów lub stron, aby zmieścić się na mniejszych ekranach". Zaznacz, aby włączyć/wyłączyć to. I wyłącz to ..

Mam nadzieję, że rozwiąże to Twój problem.

3

IPAD nie lubi cover w skróconym tle. Jeśli używasz pokrywę zrobić na nowej linii

-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
Powiązane problemy