如何拉伸背景圖像以適應網頁

為您的網站帶來背景圖形的視覺興趣

圖像是有吸引力的網站設計的重要組成部分。這包括使用背景圖像。這些是在頁面區域後面使用的圖像和圖形，而不是作為內容頁面的一部分呈現的圖像。這些背景圖片可以增加頁面的視覺興趣，並幫助您實現您可能在頁面上尋找的視覺設計。

如果您開始使用背景圖片，則無疑會遇到想要圖片展開以適應頁面的場景。

這種伸展背景圖像的願望是網頁設計師非常普遍的願望，因為不是每個圖像都適合網站的空間。不用設置固定大小，無論瀏覽器窗口有多寬或很窄，拉伸圖像都可以彎曲以適應頁面。

拉伸圖像以適應頁面背景的最佳方式是使用CSS3屬性作為背景大小。這是一個使用背景圖片作為頁面主體的示例，它將大小設置為100％，以便它始終伸展以適合屏幕。

身體 {
背景：url（bgimage.jpg）不重複;
背景大小：100％;
}

據caniuse.com稱，該屬性適用於IE 9+，Firefox 4+，Opera 10.5+，Safari 5+，Chrome 10.5+以及所有主流移動瀏覽器。這涵蓋了今天可用的所有現代瀏覽器，這意味著您應該使用此屬性，而不必擔心它不會在某個人的屏幕上工作。

您不太可能需要支持比IE9更早的瀏覽器，但我們假設您擔心IE8不支持此屬性。在這種情況下，您可以偽造延伸的背景。您可以使用Firefox 3.6（-moz-background-size）和Opera 10.0（-o-background-size）的瀏覽器前綴。

偽造延伸背景圖像的最簡單方法是在整個頁面上展開。然後，你不會因為額外的空間，或者不必擔心你的文本適合在拉伸區域。以下是如何做到這一點：

id =“bg”/>

首先，確保所有瀏覽器在HTML和BODY元素上都有100％的高度，0邊距和0填充。將以下內容放在HTML文檔的頭部：
將您想要成為背景的圖像添加為網頁的第一個元素，並為其指定“bg”的ID ：
定位背景圖像，使其固定在頂部和左側，寬100％，高100％。將其添加到您的樣式表中：
img＃bg {
位置：固定;
top：0;
左：0;
寬度：100％;
身高：100％;
}
將所有內容添加到ID為“content”的DIV元素內的頁面。在圖像下方添加DIV：
您的所有內容 - 包括標題，段落等

注意：現在查看您的頁面很有趣。圖片應該展示出來，但是您的內容完全缺失。為什麼？由於背景圖像高度為100％，並且內容分區位於文檔流中的圖像之後 - 大多數瀏覽器都不會顯示它。
放置您的內容以使其相對並且z索引為1.這將使其在符合標準的瀏覽器中位於背景圖像上方。將其添加到您的樣式表中：
#content {
位置：相對;
z-index：1;
}

但是你沒有完成。 Internet Explorer 6不符合標準，仍然存在一些問題。除了IE6之外，還有很多方法可以隱藏每個瀏覽器的CSS，但最簡單（也是最不可能導致其他問題）的方法是使用條件註釋。將以下樣式表放在文檔頭部：
在突出顯示的評論中，添加另一種樣式表以獲得更好的IE 6播放效果：
請務必在IE 7和IE 8中進行測試。您可能還需要調整註釋以支持它們。但是，當我測試它時，它就起作用了。

好的 - 這是無可厚非的。很少有網站需要支持IE 7或8，遠不止IE6！

因此，這種方法過時了，可能對您不必要。我把它放在這裡更多的是作為一種好奇心的模式，以至於在我們所有的瀏覽器一起玩得很好之前，還有多少困難！

您可以使用類似的技術在網頁上的DIV或其他元素上偽造延伸的背景圖像。這有點棘手，因為您必須使用絕對定位或對頁面的其他部分有奇怪的間距問題。

將圖像放在我想用作背景的頁面上。
在樣式表中，為圖像設置寬度和高度。請注意，您可以使用百分比來表示寬度或高度，但我發現使用長度值調整高度更容易。
img＃bg {
寬度：20em;
身高：30em;
}
像上面所做的那樣，將您的內容放在ID為“content”的div中：
你在這裡的所有內容
將內容div設置為與背景圖像相同的寬度和高度：
div＃content {
寬度：20em;
身高：30em;
}
然後將內容放置到與圖像相同的高度。所以如果你的圖像是30em，你會有一個頂部樣式：-30em; 不要忘記將內容的z索引設置為1。
#content {
位置：相對;
頂部：-30em;
z-index：1;
寬度：20em;
身高：30em;
}
然後為IE 6用戶添加-1的z-index，如上所示：

再次，隨著背景尺寸享受現在廣泛的瀏覽器支持，這種方法也很可能不必要，並作為過去時代的產品呈現。如果您確實想要使用這種方法，只需確保在盡可能多的瀏覽器中進行測試即可。

如果您的內容更改大小，則需要更改容器和背景圖片的大小，否則最終會出現奇怪的結果。

Alike posts