Question

我正在构建自己的子主题，基于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%;
}

提前谢谢你。迪马

Answer 1

IE9 +支持CSS3 background-size：封面功能，但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/

如何在BuddyPress子主题中的IE中拉伸背景图像

1 个答案: