【问题标题】:Scale background image to fit ie8 window缩放背景图像以适合 ie8 窗口
【发布时间】:2013-10-16 22:38:33
【问题描述】:

我正在使用 drupal 7 模块加载背景图像,但 IE8 不支持 css3 调整大小。

background-image: url('image.jpg');
background-size: cover;

我无法使用通常的方法轻松加载图像,例如将其放入 DIV 或使用 ms-filter alphaimageloader 加载它。

如果仅使用 ie8 支持的 CSS 无法做到这一点,则可以使用 javascript 解决方案。 (也适用于 ie7 的东西也很棒,但 ie8 是优先考虑的)。

【问题讨论】:

    标签: javascript html css internet-explorer-8 drupal-7


    【解决方案1】:

    为 Internet Explorer 8 和 IE7 添加全尺寸背景图片

    由于您无法使用通常的方法轻松地将背景放置在您的网站中,您能否在代码中放置一张图片?如果是这样,这个解决方案可能会奏效。我用它来模拟IE8和IE7的全屏背景,效果很好。

    将图片放在 html 代码中的 body 标记之后。 (根据您的站点结构,您可能可以将其放置在其他位置,但您可能必须添加 z-index。)接下来,此示例中的背景包含在 IE 条件注释中,因此只有 IE8 及以下版本才能看到它。 (注意:它在 IE6 中存在问题,但您也许可以让它工作?如果没有,只需调整条件注释以仅包括 IE7 和 IE8)。

    HTML 代码

    <!DOCTYPE html>
    <head></head>
    <body>
    <!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
    

    CSS

    .ie87-bg {
    display:block;
    position:fixed;
    top:0;
    left:0;
    min-height:100%;
    min-width:1024px;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    }
    

    您可能已经知道这一点,但这里有 3 种针对旧版本 IE 的方法:

    1. JavaScript 浏览器功能检测 - mattstow.com/layout-engine.html
    2. Css 黑客 - BrowserHacks.com
    3. IE 条件评论http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

    有用的提示:background-image:none; 覆盖 background-size: cover。 _ hack 是在 IE6 .ie87-bg {_display: none;} 中关闭自定义 IE 背景的一种方法。

    position:fixed; 在移动/触摸屏上有问题。默认的position:scroll; 在触摸时效果很好。背景想法来自本教程 - http://css-tricks.com/perfect-full-page-background-image/

    【讨论】:

    • 不知道为什么你没有得到赞成票或你的答案没有被接受,但你只是让我停止了 3 小时的头撞墙。条件语句真的为我解决了问题!!!谢谢。
    【解决方案2】:

    这适用于我在 IE8 的全窗口上拉伸图像

    http://css-tricks.com/perfect-full-page-background-image/

    【讨论】:

      猜你喜欢
      • 2015-07-14
      • 1970-01-01
      • 1970-01-01
      • 2021-03-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-30
      • 1970-01-01
      相关资源
      最近更新 更多