Несколько фоновых изображений IE8 - PullRequest
Новая
       16

Несколько фоновых изображений IE8

9 голосов
/ 17 декабря 2010

Есть ли плагин jquery (или любой другой способ), чтобы заставить IE8 показывать несколько фоновых изображений?

Ответы [ 3 ]

20 голосов
/ 17 декабря 2010

Несколько фонов CSS3 для Internet Explorer и устаревшего Mozilla Firefox

Эта библиотека обеспечивает поддержку нескольких фоновых изображений в Internet Explorer 6-8 и Firefox <= 3.5, читая код CSSтеги style и link. </p>

Поддержка браузера CSS3 распространяется на background-image, background-position, background-repeat.Эта библиотека реализует только свое собственное свойство для свойства фона стиля сокращения.

http://plugins.jquery.com/project/multiple-bg

enter image description here

Пример использования

Включая скрипт

Все, что нужно включить - это библиотека jQuery и этот скрипт для работы этих функций.Никакого дополнительного кодирования Javascript не требуется.Минимизированная библиотека имеет размер всего 8,7 КБ! 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiple-bgs.js"></script>

Написание CSS

Несколько фонов с использованием свойства background читаются с использованием этой библиотеки Javascript.Обратите внимание, как поддерживаются наведения и активные состояния. 

#ex1 {
    background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right.gif) no-repeat 100% 0, 
                url(middle.gif) repeat-x 0 0;
}
#ex1:hover {
    background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-hover.gif) no-repeat 100% 0, 
                url(middle-hover.gif) repeat-x 0 0;
}
#ex1:active {
    background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */
    background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */
                url(right-active.gif) no-repeat 100% 0, 
                url(middle-active.gif) repeat-x 0 0;
}
7 голосов
/ 17 декабря 2010

CSS3 PIE может сделать то, что вы ищете CSS3 PIE

5 голосов
/ 14 июля 2012

Если в качестве фона не более 3 изображений, вы можете поиграться с :before и :after в CSS.См., Например, ссылку .

Возможно, вам понадобится добавить в заголовок следующее, если вы хотите, чтобы ie7 также вел себя: 

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
...