CSS фоновые изображения не отображаются на iPad - PullRequest
Новая
       8

CSS фоновые изображения не отображаются на iPad

6 голосов
/ 23 июля 2010

Я совершенно сбит с толку, и мне интересно, не хватает ли мне чего-то простого, но я не могу отобразить фоновое изображение на ipad или в симуляторе ipad.

В качестве теста я собралследующая простая страница: 

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

В качестве теста я также выводю изображение непосредственно над блоком div.В хроме они оба появляются, но в симуляторе ipad тоже нет.Есть идеи?

Ответы [ 6 ]

27 голосов
/ 04 ноября 2010

Это может быть связано с размерами изображения. Руководство по веб-контенту Safari отмечает, что максимальный размер изображений GIF, PNG и TIFF составляет 3 мегапикселя (3 *1024* 1024).Я столкнулся с подобной проблемой при отображении меню, основанного на CSS-спрайтах.Мне пришлось сжать довольно большое изображение (3000x1500), прежде чем какой-либо из спрайтов отобразился на iPad.

3 голосов
/ 06 августа 2013

IPAD не нравится cover в фоновом режиме. Если вы используете покрытие, сделайте это на новой строке 

   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
     background-size: cover;
0 голосов
/ 01 января 2013

В некоторых настройках мобильных тем вы найдете «уменьшать большие изображения внутри постов или страниц, чтобы уместить их на меньших экранах» проверьте, чтобы включить / отключить его. И отключи его ..

Надеюсь, что это решит вашу проблему.

0 голосов
/ 06 февраля 2011

Убедитесь, что у вас есть действующий CSS! http://jigsaw.w3.org/css-validator/

Я сталкивался с этой проблемой прежде, и проверка / исправление моего CSS исправили это!

0 голосов
/ 24 июля 2010

У меня нет этих тестов, но у меня есть несколько идей, которые вы должны проверить:

1) Как файлы помещаются на «локальный диск» iPad? у вас нет HTTP, поэтому я предполагаю, что у вас есть образ на «жестком диске» (RAM) - попробуйте открыть файл прямо в браузере, он показывает / загружает?

2) Попробуйте добавить: «display: block;» на ваш CSS-рендеринг. Мог бы сделать трюк

3) Тег IMG, попробуйте добавить ширину и высоту, он что-нибудь меняет?

4) Какой тип файла PNG вы используете? 8-битный или 24-битный?

5) Что произойдет, если вы вместо этого будете использовать GIF или JPG?

6) при использовании фоновых изображений. Попробуйте использовать длинный формат для атрибутов. "Фоновое изображение: URL (image.jpg);"

.

7) Также попробуйте добавить <!DOCTYPE html>, чтобы браузер перешел в режим HTML5.

0 голосов
/ 24 июля 2010

всегда ставьте кавычки вокруг вашего URL и либо полную url("http://example.com/folder/file.htm"), либо хотя бы косую черту url("/file.htm")

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...