Несколько фоновых CSS

Question

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

#container{
  margin:0 auto;
  width:1154px;
  background:url(../img/background-top-new.jpg) no-repeat, url(../img/background-middle.jpg) repeat-y;
  height:auto;
}

Я сталкиваюсь с этой проблемой в ie. Если у вас есть решение этой проблемы, пожалуйста, дайте мне какое-нибудь решение.

Answer 1

Несколько фоновых изображений - это функция CSS3, что означает, что она поддерживается только последними версиями Firefox, Chrome, Safari и Opera.

Возможно, вы сможете воспроизвести тот же эффект в IE, но вам придется делать это с несколькими элементами div (1 background / div)

Answer 2

CSS3 MUltiple background не поддерживается в IE6,7,8 и Firefox ниже 3,5

http://www.quirksmode.org/css/background.html

Можно делать с трюками

http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html

Answer 3

IE в настоящее время не поддерживает несколько фоновых изображений (за исключением IE9).Существует обходной путь, использующий фильтры DirectX, который позволяет указать 2 фона, но он далеко не оптимален: http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html

Наиболее переносимое решение - создать несколько элементов div и сложить их в слои.