使用CSS，我如何將圖像作爲背景圖像跨越頁面的整個寬度？

說，就像在這裏的例子：http://www.electrictoolbox.com/examples/wide-background-image.html 使用CSS，我如何將圖像作爲背景圖像跨越頁面的整個寬度？

當我這樣做，我最終得到圖像周圍的白色邊框，無論我做什麼。我究竟做錯了什麼？

2012-08-22 Doug Smith

一些代碼會很有幫助 – EGHDK

如果你希望使用background-image: url(...);，我不認爲你可以。通過Z-打

.bg 
{ 
    width: 100%; 
    z-index: 0; 
}

您現在可以疊加擴張圖象以上內容：但是，如果你想與分層玩，你可以做這樣的事情：

<img class="bg" src="..." />

然後一些CSS索引等。一個簡單的說明，該圖像不能包含在width: 100%;的任何其他元素中以應用於整個頁面。

下面是一個簡單的演示，如果你不能依靠background-size：http://jsfiddle.net/bB3Uc/

來源

2012-08-22 23:53:17 sellmeadog

所以這是不可能做到背景圖像？這不可能是真的... –

不是不可能的，但你的瀏覽器必須支持'背景大小'。如果不是，那麼你只需要一個非常大的圖像，就像你鏈接到的資源所展示的那樣。如果你不能依賴'background-size'，我只是提供了一個替代方案。 – sellmeadog

你的CSS設置爲：

#elementID { 
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat; 
    height: 200px; 
}

IT中心的形象，但不能擴展它。

FIDDLE

在新的瀏覽器可以使用background-size財產和做的事：

#elementID { 
    height: 200px; 
    width: 100%; 
    background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat; 
    background-size: 100% 100%; 
}

FIDDLE

除此之外，定期的圖像是如何做這件事，但後來它的不是真正的背景圖像。

來源

2012-08-22 23:53:26 adeneo

我認爲縮放寬度是問題的目標。 – sellmeadog

忘記'背景大小'，好的更新。 – sellmeadog

這不能解決我的白色邊界問題。請參閱：http：//i.imgur.com/mRRoZ.png –

背景圖片，理想情況下，總是用CSS來完成。所有其他圖像都是用html完成的。這將跨越您網站的整個背景。

body { 
    background: url('../images/cat.ong'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
}

來源

2015-09-25 17:10:44 AliInvestor

使用CSS，我如何將圖像作爲背景圖像跨越頁面的整個寬度？

回答

相關問題