изменение фонового изображения в mobile.css - PullRequest
Новая
       14

изменение фонового изображения в mobile.css

2 голосов
/ 27 декабря 2010

Хорошо, я сейчас направляю свои таблицы стилей, как указано ниже: 

<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />  
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>

На Site.css у меня есть определенный идентификатор с фоновым изображением: 

#container { 
    width: 1000px;
    margin-left: auto;
    margin-right: auto; 
    background: url('../images/topbackground.gif') no-repeat;
}

В mobile.css я подумал, что могу просто изменить его на «нет» или другое изображение, чем-то похожее на это (я попробовал несколько вариантов на данный момент): 

#container {
    width: 100%;
    margin-left: 0;
    margin-right: 0; 
    background: #ffffff none;
    z-index: 30;
}

Однако, похоже, это не работает. Фон все еще отображается на мобильной версии сайта. Я смотрел на это в Opera Mini и эмуляторе Android SDK. Мобильная версия сайта собирает все другие свойства из mobile.css, но не фоновые изменения.

Я знаю, что в этот момент должно быть что-то очевидное, о чем я просто не замечаю. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 27 декабря 2010

это потому, что вы загружаете mobile.css перед загрузкой Site.css.(в приведенном вами примере).Я думаю, что это работает, если вы сначала вставляете сайт, а затем mobile.css ..

Если вам по какой-то причине необходимо сохранить его, вам нужно будет использовать !important после заявления.

Здесь вы можете найти рабочий пример: http://jsfiddle.net/2EaQb/

...