0

我如何使用 2 张图片作为正文第一个背景将在顶部没有重复，第二张图片将在第一个重复之后，在 Firefox 中我可以轻松做到这一点，但我在 IE 中的问题 在此处输入图像描述

在此处输入图像描述

4

5 回答 5

2

一个接一个接一个接html一个body-

html{
  background: url() repeat-y left top;
}
body{
  background: url() no-repeat left top;
}
于 2012-10-09T07:36:45.413 回答
1

可以使用专有过滤器在 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]-->
于 2012-10-09T07:35:09.463 回答
1

使用下面的代码。这支持包括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   
   }​

你可以在这里得到详细的解释

于 2012-10-09T07:35:32.077 回答
0

使用嵌套的 div 并为一个应用一个背景，为另一个应用另一个背景

<div class="background-bottom"><div class="background-top"></div></div>
于 2012-10-09T07:35:33.443 回答
0

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

它可能在IE中工作

于 2012-10-09T07:38:00.850 回答