Несколько фоновых изображений | Откат для <IE9 - PullRequest
Новая
       4

Несколько фоновых изображений | Откат для <IE9

1 голос
/ 11 марта 2011

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

background-color:#ebe2c2;
background-image:url('../images/bg-clouds.png'), url('../images/bg-main-repeat.jpg');
background-repeat:no-repeat, repeat;
background-position:center top, left top;
background-attachment:fixed, fixed;

Как я могу получить только "bg-main-repeat.jpg" и все его свойства для применения? Прямо сейчас IE7 / IE8 откат только на цвет. Могу ли я отформатировать свой код по-другому, чтобы современные браузеры применяли оба фоновых изображения, а старые - только одно. Я бы предпочел не добавлять больше HTML, но если это единственный способ, это единственный способ.

Заранее спасибо

Ответы [ 3 ]

9 голосов
/ 31 марта 2011

ты бы сделал это. 

background:url('../images/bg-clouds.png') center top no-repeat fixed;
background:url('../images/bg-clouds.png') center top no-repeat fixed,
    url('../images/bg-main-repeat.jpg') left top repeat fixed
;
background-color:#ebe2c2;
3 голосов
/ 18 октября 2012

Раньше я использовал условные таблицы стилей, но гораздо удобнее использовать HTML-класс для браузера, который позволит вам писать CSS-код для браузера, используя только одну таблицу стилей.

ЗАМЕНИТЕ ВАШ СТАНДАРТНЫЙ ОТКРЫТЫЙ ТЭГ HTML НА СЛЕДУЮЩИЙ: 

<!--[if IE 7]><html class="lt-ie8 lt-ie9 lt-ie10 ie7"><![endif]-->
<!--[if IE 8]><html class="lt-ie9 lt-ie10 ie8"><![endif]-->
<!--[if IE 9]><html class="lt-ie10 ie9"><![endif]-->                    
<!--[if gt IE 9]><!--><html><!--<![endif]-->

ЗДЕСЬ ВАШ CSS: 

/* default css */
.element {
   background-color:#ebe2c2;
   background-image:url('../images/bg-clouds.png'), url('../images/bg-main-repeat.jpg');
   background-repeat:no-repeat, repeat;
   background-position:center top, left top;
   background-attachment:fixed, fixed;
}

/* conditional css */
.lt-ie9 .element {
   background-color:#ebe2c2;
   background-image:url('../images/bg-main-repeat.jpg');
   background-repeat:repeat;
   background-position:left top;
   background-attachment:fixed;
}
1 голос
/ 11 марта 2011

Вы можете использовать один из двух методов:

  1. CSS "хаки", чтобы заставить некоторые браузеры вести себя по-разному

  2. (намного лучше) Используйте встроенные условные операторы только для Internet Explorer, такие как: 

    <!--[if lt IE 9]>
<link REL="stylesheet" HREF="css/ie.css" TYPE="text/css">
<![endif] -->

    для указания другого CSS для страниц, отображаемых в Internet Explorer.

...