CSS背景圖像與左下角對齊，不強制滾動條

我有一個簡單的網站：固定寬度，可變高度，居中。我希望有一個背景圖片對齊到內容的左下角，像這樣：CSS背景圖像與左下角對齊，不強制滾動條

---------------------------------------------------------- 
       ____________________________ 
       |  <- 960px ->  | 
       |       | 
       |       | 
       |       | 
       |   Content   | 
       |       | 
       |       | 
       |       | 
     ----------|       | 
     |   ____________________________ 
     | bg-img | 
     |   | 
     ------------ 
----------------------------------------------------------

如果瀏覽器窗口是足夠大的整體背景圖片應該是可見的。如果它更小，則應該切斷圖像而不強制水平或垂直滾動條。我不知道如何獲得水平和垂直的東西。有什麼建議麼？非常感謝。

來源

2010-06-21 Christoph

你是什麼意思的水平和垂直的東西？ – BioXhazard 2010-06-21 15:34:29

我的意思是，如果它是固定的高度，我知道如何去做。我可以簡單地將背景圖像應用到body元素。但它應該根據內容框的高度上下移動。 – Christoph 2010-06-21 15:41:56

感謝您的回答。我認爲這不是完全可能的。我做了一個不同的方法將元素定位在絕對左下角。它現在位於左下角，當瀏覽器窗口變小時，它會被content-div重疊。

來源

2010-07-09 12:43:22 Christoph

使圖像變得非常大並將其應用到身體標記上，以便圖像可以放在您想要的位置。將它置於中央左側，但使其足夠寬以便其正確定位超過960像素，但即使在任何一邊，以便它正確居中。

來源

2010-06-21 15:29:03 matpol

...圖像應根據內容框的高度上下移動。在這種情況下，將其應用於身體標記不起作用。 – Christoph 2010-06-21 15:49:01

我不這樣做，這是可能的，然後 – matpol 2010-06-21 16:33:31

爲了使尺寸適合不同的瀏覽器，您可以設置背景圖像，然後將左右邊距設置爲自動。這將使您的網站自動進入中心，並且無論瀏覽器改變多少，您的背景都會被截斷。

body { 
    background-image: whatever.jpg; 
} 

maindiv/contentholder { 
    margin-left:auto; 
    margin-right:auto; 
}

來源

2010-06-21 15:29:14 BioXhazard

...但如果你減少瀏覽器窗口的高度，我需要圖像從底部切斷。 – Christoph 2010-06-21 15:46:58

您可以嘗試將高度設置爲自動。 – BioXhazard 2010-06-21 15:55:03

絕對定位bg-img。隱藏從圖像創建的溢出。我把它放在一個風格的div。

來源

2010-06-21 16:46:20 TheGeekYouNeed

不要把背景放在內容div上，把它放在內容div的子節點上。然後，絕對定位該元素：

position: absolute; 
left: -100px; 
bottom: -100px;

它也需要一個寬度和高度，並且內容DIV將需要的位置是：相對或絕對的。如果你需要一個更徹底的例子，就這麼說吧，我會寫出一個。

至於從底部切下圖像，除非可以保證您的內容高度小於窗口高度（您可能無法），否則您可能會失敗。

來源

2010-06-22 17:20:02

CSS背景圖像與左下角對齊，不強制滾動條

回答

相關問題