跨越acrosss瀏覽器的圖像就像在Facebook的旗幟，但現在的圖像

Question

我想知道我怎麼可以使跨瀏覽器的圖像，使得即使，我的網站是在更大的顯示器觀看，圖像依然會跨越出來，延伸而不顯示最後的空白區域。

Answer 1

你基本上有兩種選擇：

1. 使用，填補了整個寬度的重複模式：你可以使用

   width: 100%; background: url(your-image-file) repeat-x

2. 使用一個固定的主圖像和背景做填充圖像填充剩餘區域：背景將使用與上述相同的代碼，並且主圖像可以是背景容器內的img。

Answer 2

那麼，要開始，讓我們用這段代碼清除您的利潤。

* {    
    margin: 0; 
    padding: 0; 
} 

通過在樣式表或部分中使用它，它將允許這些圖像在沒有空白的情況下一直伸展。

接下來，你需要創建一個形象，看起來不歪斜。要做到這一點，您需要以相當寬的格式創建它以開始。如果你想填充整個背景，我建議1028X768 px是一個很好的尺寸。

最後，現在是時候把代碼的最後一位，並得到它所有的工作。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

這將在所有當前瀏覽器（IE8及以下版本除外）附近使用dang。

爲了將要跨越但不能完全覆蓋奇數大小的圖片，我會建議使用<div>以創建圖像的地點，並添加一個樣式，上面寫着width: 100%;的<div>。

這可以通過高度以及完成。

希望這會有所幫助。