Фоновое изображение, указанное в CSS, не отображается в iPad - PullRequest
Новая
       1

Фоновое изображение, указанное в CSS, не отображается в iPad

2 голосов
/ 23 июня 2011

У меня есть класс CSS, в который я добавил фоновое изображение, например: 

.my-class{
   background-image: url(images/my-bg.png);
}

это нормально работает и работает в браузерах, но когда я вижу его в iPad, фоновое изображение не видно,

В чем может быть причина?

Ответы [ 6 ]

1 голос
/ 21 июля 2011

У меня была такая же проблема, и мне удалось получить рабочее решение с использованием jQuery 

    $(document).ready(function () {

        var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';

        $('.commands .command').css({
            background: 'url(' + buttonsFilename + ')',
            width: '55px',
            height: '55px',
            display: 'inline-block'
        });
    });

Я использую это на веб-сайте ASP.NET MVC, отсюда и тег <% %>.

Я мог заставить его работать только с помощью свойства css для ярлыка фона.Я не могу заставить работать любое из следующих ...

  • background-image
  • backgroundImage
  • 'background-image'

... при использовании обозначения объекта.К сожалению, это стирает любые другие настройки фона, которые вы можете иметь.Но я справился с этим, используя другой фрагмент jQuery для установки моего свойства background-position.

1 голос
/ 23 июня 2011

Без дополнительной информации (т.е. как вы применяете этот класс и к какому элементу) я не могу помочь в дальнейшем. Однако я могу сказать вам, что этот фрагмент прекрасно работает на настольных компьютерах, iPhone и iPad: 

<!DOCTYPE>
<html>
    <head>
    <style type="text/css">
        .my-class{background-image: url(images/my-bg.png);}
    </style>
    </head>
    <body class="my-class">
        <p>Some content</p>
    </body>
</html>
0 голосов
/ 01 апреля 2015

Если вы сохраняете .png из фотошопа, обязательно сохраните его с помощью «Сохранить для Интернета и устройств» и выберите PNG24.

0 голосов
/ 11 мая 2014

Я обнаружил, что у меня возникла та же проблема (т. Е. Фоновое изображение не показывалось на iPad), проблема заключалась в использовании кавычек или их отсутствии, когда требовались апострофы ...

Проблема (без апострофов) 

.my-class{background-image: url(images/my-bg.png);}


Исправлено (добавлены апострофы) 

.my-class{background-image: url('images/my-bg.png');}
0 голосов
/ 08 апреля 2013

Добавьте этот метатег на свою страницу 

<meta name = "viewport" content = "width = device-width, height = device-height"/>
0 голосов
/ 01 июля 2012

У меня была эта проблема, и, наконец, после нескольких часов избиений и трудностей с яблоками, я сделал тег div с идентификатором вокруг всего сайта.IPad это нравится:)

Проблема решена.

CSS 

<style type="text/css">

        #bodybackground {
        background:#999 url('http://mywebsite.com/images/background.jpg')
    }

</style>

HTML 

<div id="bodybackground">
entire site here
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...