2009-10-22 75 views
0

是否可以在div框架之外的div中擴展background元素?將div背景擴展到div元素之外

而且屬於一種解決方法,我發現了一個後續問題:

我在後面放置我的主要內容我的HTML代碼放在一個<img>。這樣可以正確顯示整個背景圖像,但滾動條可以延伸圖像的整個長度,當然圖像也可以選擇。有沒有辦法刪除滾動條,使圖像不可選?

的原因,我不把背景圖像中的body風格的CSS是因爲我要當調整瀏覽器窗口的背景附加到我的內容。

回答

0

也許你應該嘗試從CSS使用圖像背景,然後其他元素不會自動調整大小?

+0

如果我在CSS中使用'背景'功能,當窗口調整大小時,圖像不會「跟隨」內容。我的內容通過自動頁邊距居中。 – fr0th 2009-10-22 20:07:13

+0

即使您設置了背景:center center no-repeat url(您的圖片所在的位置) – eugeneK 2009-10-22 21:12:45

0

我可能沒有在腦海中看到你想要的東西......但是有CSS屬性可以從項目中移除滾動條,只需使用overflow屬性並將其設置爲隱藏。

http://www.w3.org/TR/CSS2/visufx.html#overflow

如果你只是試圖阻止對是DIV滾動條。如果您知道圖像的大小,或者它總是相同,只需將DIV的寬度和高度設置爲與圖像相同,並將其全部顯示出來。

據我所知,沒有辦法讓背景內容大於顯示它的項目。

1

嘗試使用額外的包裝<div>,並在其上設置背景圖像。

1

問題1:第

問題2:使用代替<img>background-image財產。您可以將其放置在包含您的內容的<div>之後,或與您的內容放在同一個框中。使用background-image不會給你任何滾動條。

+0

除非我指定與圖片尺寸相匹配的寬度和高度,否則背景不會被剪裁/包含在div尺寸中?而且一旦我指定這些尺寸不會出現滾動條? – fr0th 2009-10-22 21:00:36

+0

它會被裁剪,是的。如果出現滾動條,這是因爲內容溢出,而不是背景圖像。削減應該不是真正的問題(通常是可取的),但是,然後,我無法想象你想要做什麼。 – stephenhay 2009-10-23 07:42:56

0

您可以將您的背景圖像放在您的部門之外,但在調整瀏覽器大小時,請使用CSS定位將其保留在正確的位置。一個常見的解決方案是將背景位置設置爲中心,分區也是如此,從而使它們保持在同一個位置。

1

「是否有可能在一個div擴展的背景元素的DIV框架外」

你可以給它通過調整2 div的margin和padding值做簡單的錯覺。這是純粹的CSS,頂級div可以隨意增長。底部div必須是一個設定的高度。我已經在多個瀏覽器測試這一點,並沒有發現任何問題,但...

<div id="top" style="padding:0 0 300px 0; margin:0 auto -700px; background:red;" > 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
</div> 

<div id="bottom" style="margin:400px 0 0; padding:0; height:300px;"> 
my bottom content at a set height - required!<br /><br /> 
</div> 

希望這有助於!這裏是一個updated jsfiddle,這樣你就可以立即看到它看起來像什麼