CSS3 background-size：封面顯示意外行爲

我有一個HTML文件，如下所示。它使用元素上的「background-size：cover」設置。CSS3 background-size：封面顯示意外行爲

當我使用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>

來源

2013-01-25 anr1234

試試這個代碼，它應該解決您的問題：

<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

來源

2013-01-25 08:21:17

我試着建議的代碼。不解決問題。過濾器設置會導致圖像垂直重複。覆蓋整個body元素的主要問題仍然存在（當我從我的本地Apache服務器獲取它時） – anr1234

查看我的截圖 –

CSS3 background-size：封面顯示意外行爲

回答

相關問題