0

我正在构建自己的子主题，基于 BuddyPress 默认主题。我需要有一个拉伸 100% 宽度/高度的背景图像。它在 Chrome 和 Firefox 中运行良好，但在最新版本的 IE 中，图像以原始大小位于中心。不会发生拉伸。这是我正在使用的 CSS，它只是父主题（BP 默认主题）的扩充：

body {
background-color: #000000;
background-image: url(images/DSC09005cc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
max-width: 1250px;
margin: 0 auto;
width: 95%;
}

先感谢您。迪玛

4

1 回答 1

0

IE9+ 支持 CSS3 background-size:cover 功能，但 IE8 及更低版本不支持。如果您尝试为 IE 8 及更低版本修复此问题，我可能会建议如下：

HTML：

<body>
     <img src="images/DSC09005cc.jpg" class="fit-background">
...

CSS：

img.fit-background {
     min-height: 100%;
     min-width: 1024px;
     width: 100%;
     height: auto;
     position: fixed;
     top: 0;
     left: 0;
}

@media screen and (max-width: 1024px) {
     img.fit-background {
          left: 50%;
          margin-left: -512px;
     }
}

...

如果要对 IE 6、7 和 8 以外的浏览器隐藏图像，可以将图像放在 IE 条件语句中：

<body>
<!--[if lt IE 9]>
     <img src="images/DSC09005cc.jpg" class="fit-background">
<![endif]-->

...

如果您想了解更多关于它和其他几个选项的信息，这里是原始链接：http: //css-tricks.com/perfect-full-page-background-image/

于 2013-11-11T21:46:26.667 回答