【问题标题】:how to stretch background image in IE in BuddyPress child theme如何在 BuddyPress 子主题的 IE 中拉伸背景图像
【发布时间】:2013-11-23 18:11:21
【问题描述】:

我正在基于 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%;
}

提前谢谢你。 迪玛

【问题讨论】:

    标签: css image internet-explorer background buddypress


    【解决方案1】:

    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/

    【讨论】:

      猜你喜欢
      • 2011-11-12
      • 2010-12-09
      • 2017-01-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-31
      • 2016-10-31
      • 2015-07-26
      相关资源
      最近更新 更多