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 回答