Html CSS3背景尺寸：显示意外行为的封面_Html_Css

Html CSS3背景尺寸：显示意外行为的封面

html css

Html CSS3背景尺寸：显示意外行为的封面,html,css,Html,Css,我有一个HTML文件，如下所示。它在元素上使用“背景大小：封面”设置当我使用IE9上的file/open选项打开文件时，它会显示覆盖整个窗口的背景图像。这是预期的行为但是，当我通过Apache服务器打开同一个文件时(http://127.0.0.1/test.html)背景图像不会水平覆盖整个窗口。。。。。它会在窗口的右端留下一条空白的垂直条带。这不是预期的行为我在其他背景图像文件中也看到了相同的行为。从Apache服务器获取HTML页面时，“background size:cover”设

我有一个HTML文件，如下所示。它在元素上使用“背景大小：封面”设置

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

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

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

此外，还可以看到背景大小值的其他设置的类似行为（例如，当我设置背景大小时：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>


身体
{
背景：url（'desert.jpg'）；
背景尺寸：封面；
背景重复：无重复；
}
这是一条线

试试这段代码，它可以解决您的问题：

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


身体
{
背景：url（“desert.jpg”）中心固定不重复；
背景尺寸：封面；
背景色：#000；
溢出：自动；
过滤器：progid:DXImageTransform.Microsoft.AlphaImageLoader（src='desert.jpg'，sizingMethod='scale'）；
-ms过滤器：“progid:DXImageTransform.Microsoft.AlphaImageLoader（src='desert.jpg'，sizingMethod='scale'）”；
}

如需进一步解释，请阅读本文：

我尝试了建议的代码。这并不能解决问题。过滤器设置使图像垂直重复。覆盖整个body元素的主要问题仍然存在（当我从本地Apache服务器获得它时），请看一下我的屏幕截图