Question

我如何使用2个图像作为身体第一个背景将在顶部没有重复，第二个图像将在第一个重复之后，在Firefox中我可以轻松地做到这一点但我在IE中的问题 enter image description here

enter image description here

Answer 1

将一个附加到html，将另一个附加到body -

html{
  background: url() repeat-y left top;
}
body{
  background: url() no-repeat left top;
}

Answer 2

可以使用专有过滤器添加multiple backgrounds in IE

从链接站点获取，IE代码如下：

<!--[if gt IE 7]> 
<style type="text/css"> 
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs, dont forget to insert your wrappers id */ 
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content { 
  zoom: 1; 
} 
/* Now lets make it IE8 Multi-background images */ 
#multipleBackgroundImages { 
  background-image: url(../images/lilys.jpg); 
  background-position: bottom right; 
  background-repeat: no-repeat; 
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/lakeside2.png', sizingMethod='crop')"; 
  border: 1px solid black; 
  padding: 0 1em; 
} 
/* Fix for IE clearType */ 
#multipleBackgroundImages p { 
    position: relative; /* required to re-enable IE's clearType */ 
   } 
</style> 
<![endif]-->

Answer 3

使用以下代码。这支持所有浏览器，包括IE

body{
    width:800px; height:750px;
    background: url(http://www.google.com/logos/2012/indonesiaind12-hp.jpg), url(http://www.google.com/logos/2012/india12-hp.jpg);
    background-position:top, bottom;
    background-repeat:no-repeat, no-repeat   
   }

您可以获得详细解释here

Answer 4

使用嵌套的div并将一个背景应用于另一个背景

<div class="background-bottom"><div class="background-top"></div></div>

Answer 5

简单你必须将身体分成两个独立的div，因为你可以轻松地做到这一点。 top div和bottom div必须将这两个图像作为背景。

它可以在IE中运行

IE中的两个背景图片

5 个答案: