背景圖像可以比div本身大嗎？

我有一個100％寬度的頁腳div。它的高度約爲50px，具體取決於其內容。背景圖像可以比div本身大嗎？

是否有可能給那個#footer一個背景圖片，那種溢出這個div？

圖像大約是800x600px，我希望它位於頁腳的左下角。它應該像我的網站的背景圖像，但我已經在我的身體上設置了一個背景圖像。我需要在我的網站左下角放置另一張圖片，而#footer div完美無缺。

#footer { 
    clear: both; 
    width: 100%; 
    margin: 0; 
    padding: 30px 0 0; 
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed; 
}

圖像設置爲頁腳，但它不會溢出div。是否有可能做到這一點？

overflow:visible不做這項工作！

來源

2010-11-25 matt

我不認爲你可以讓背景圖像溢出其div。放置在Image標記中的圖像可能會溢出其父div，但背景圖像受限於它們所在背景的div。

來源

2010-11-25 21:16:28

不是真的 - 背景圖像受其所應用的元素的限制，並且溢出屬性僅適用於元素內的內容（即標記）。

您可以將另一個div添加到您的頁腳div中，然後將背景圖像應用於該頁面，然後使用該溢出。

來源

2010-11-25 21:18:13 hollsk

This could help。它要求頁腳高度是一個固定的數字。基本上，你有一個div內頁腳div與它的正常內容，與position: absolute，然後與position: relative，負z-index，因此它保持「低於」一切的圖像，和一個負的top價值的頁腳的高度減去圖像高度（在我的例子中，50px - 600px = -550px）。測試Chrome 8，FireFox 3.6和IE 9.

來源

2010-11-25 21:58:01 cambraca

您提到已在body上有背景圖片。

你可能設置html上的背景圖像，並在body上設置新的背景圖像。這當然取決於你的佈局，但你不需要使用它的頁腳。

來源

2010-11-25 22:50:42 stephenhay

115

有一個非常簡單的把戲。該專區爲正數和保證金的設置填充到是負面的

來源

2013-07-19 22:18:56 transGLUKator

這是酷！我編輯你的回覆更明確:-) – apprenticeDev 2014-01-30 01:28:37

好戲！作品完美無瑕。 – 2014-10-27 02:34:43

您可以使用CSS3僞元素如本文

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

來源

2013-08-08 04:09:10

不，你不能。

但作爲一個堅實的解決方法，我建議將第一個div分類爲position:relative並使用div::before創建一個包含圖像的底層元素。分類爲position:absolute您可以將它移動到任何相對於您的初始div的位置。

不要忘記添加內容到該新元素。下面是一些例子：

div { 
    position: relative; 
}  

div::before { 
    content: ""; /* empty but necessary */ 
    position: absolute; 
    background: ... 
}

注意：如果你希望它是「在上面」父DIV的，使用div::after代替。

來源

2015-04-26 18:48:54 ArcTanH

使用背景大小的封面爲我工作。

#footer { 
    background-color: #eee; 
    background-image: url(images/bodybgbottomleft.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    clear: both; 
    width: 100%; 
    margin: 0; 
    padding: 30px 0 0; 
}

顯然意識到的支持問題，檢查我可以使用：http://caniuse.com/#search=background-size

來源

2015-05-19 10:25:50 PanPipes

背景圖像可以比div本身大嗎？

回答

相關問題