0

根据给定的脚本

<style>
.x{
    background: url('img.jpg') no-repeat;
    background-size: contain;
    height: 100%;
  }
</style>

<div class="x"></div>

它适用于 chrome 和 firefox ......任何想法如何使它与 IE 7、8、9 一起工作

我尝试了很多脚本，但没有什么能像 FF 和 chrome 那样运行良好。

4

1 回答 1

0

9 之前的 IE 不支持 background-size：

http://www.css3.info/preview/background-size/

你必须想出一种不同的技术来处理这种情况。有关解决方法的说明，请参阅此：http: //kimili.com/journal/the-flexible-scalable-background-image-redux

如果您想要一个示例（我不会声称这是一个很好的示例，但从技术上讲，它可以工作），您可以查看我去年为这个网站工作的代码。客户想要一个缩放到屏幕大小的背景图像，但在幻灯片旋转时也会发生变化，所以它有点可怕，代码方面：

http://www.buzzhoney.com/

您需要注意http://www.buzzhoney.com/Content/style.css中的各种设置

这个网站也应该是响应式的，所以这里有几个级别的@media 查询可供查看。里面有很多东西，我没有时间重复一遍，但这里有一些亮点：

基于这个标记外壳（我已经删除了所有会妨碍这些主要元素如何协同工作的额外内容）：

<html>
    <head>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <!-- snip header stuff -->
            </div>

            <div id="main" role="main">
                <!-- snip body stuff -->
            </div>
            <footer id="footer">
                <!-- snip footer stuff -->
            </footer>

            <div id="background">
                <div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
            </div>

            <!-- snip js includes, per best practices, 
                 located at the bottom of the page -->
        </div>
    </body>
</html>

从第 316 行开始，我们为背景容器及其图像设置了初始样式，但仅适用于 320 像素到 480 像素宽的设备，适用于智能手机。然而，在 416 处，我们开始设置适用于 321px 宽及以上设备的样式：

#background
{
    left: 0;
    min-height: 730px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    height:100%;
}

#background img 
{
    left: 0;
    min-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
    display:block;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

注意容器（#background）如何设置为 100% 的宽度和高度，最小高度为 730 像素，内部图像设置为 100% 宽度，但没有指定特定高度，只有 1200 像素的最小宽度. 这基本上是说它会按比例放大，并且高度会与其宽度成比例地变化，但宽度永远不会低于 1200px，所以此时，容器将在图像周围折叠并隐藏不适合的多余部分它的区域（溢出：隐藏）。

另请注意，我使用 position:fixed 和 left:0, top:0 将背景容器锚定到位，并使用 z-index:-1 将其放置在其他所有内容的后面。

有一些小的修改可以在更高分辨率下添加一些其他功能，但没有什么能改变这个基本设置。出于您的目的，除非您想要褪色/变化的背景，否则您将删除以下线条：

    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);

因为它们会使背景图像不可见。

于 2012-10-15T14:08:38.880 回答