CSS3 background-size:cover 显示意外行为

Posted 2023-02-25

技术标签:

【中文标题】CSS3 background-size:cover 显示意外行为【英文标题】：CSS3 background-size:cover showing unexpected behavior 【发布时间】：2013-01-25 07:34:11 【问题描述】：

我有一个如下所示的 html 文件。它使用元素上的“背景大小：覆盖”设置。

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

但是，当我通过 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>

【问题讨论】：

【参考方案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

【讨论】：

我尝试了建议的代码。不能解决问题。过滤器设置会导致图像垂直重复。覆盖整个 body 元素的主要问题仍然存在（当我从本地 Apache 服务器获取它时）看看我的截图

以上是关于CSS3 background-size:cover 显示意外行为的主要内容，如果未能解决你的问题，请参考以下文章