Question

我有一个HTML文件，如下所示。它使用元素上的“background-size：cover”设置。

当我使用IE9上的文件/打开选项打开文件时，它会显示覆盖整个窗口的背景图像。这是预期的行为。

但是，当我通过Apache服务器（http://127.0.0.1/test.html）打开相同的文件时，背景图像不能横向覆盖整个窗口.....它会留下一个空白的垂直条带窗口的右端。这不是预期的行为。

我也看到了与其他背景图片文件相同的行为。似乎从Apache服务器获取HTML页面时，“background-size：cover”设置只会在一定程度上放大图像。但是当使用“文件/打开”选项获取它时，它会将背景图像放大到足以覆盖整个元素宽度。

此外，还可以看到与背景大小值的其他设置类似的行为（例如，当我设置背景大小时：100％100％;）。

以下是HTML文件：

<html>
<head>
<style>
        body
        {
            background:url('desert.jpg');
            background-size:cover;
            background-repeat:no-repeat;
        }
</style>
</head>

<body>

        This is a line


</body>
</html>

Answer 1

尝试使用此代码，它应该可以解决您的问题：

<style>
    body
    {
        background: url("desert.jpg") center center fixed no-repeat;            
        background-size: cover;
        background-color: #000;
        overflow: auto;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale')";
    }
</style>

有关进一步说明，请阅读本文：http://cookbooks.adobe.com/post_scale_background_image_to_browser_size-17590.html

CSS3 background-size：覆盖显示意外行为

1 个答案: