CSS背景图像与左下角对齐而不强制滚动条答案

【问题标题】：CSS background image aligned to left bottom corner without forcing scrollbarsCSS背景图像与左下角对齐而不强制滚动条
【发布时间】：2010-07-09 20:43:22
【问题描述】：

我有一个简单的网站：固定宽度、可变高度、居中。我希望背景图像与内容的左下角对齐，如下所示：

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

如果浏览器窗口足够大，整个背景图像应该是可见的。如果它更小，图像应该在不强制水平或垂直滚动条的情况下被切断。我不知道如何正确处理水平和垂直的事情。有什么建议么？非常感谢。

【问题讨论】：

横竖的东西是什么意思？
我的意思是，如果它是固定高度，我知道该怎么做。我可以简单地将背景图像应用于 body 元素。但它应该根据内容框的高度上下移动。

标签： html alignment background-image css

【解决方案1】：

不要将背景放在内容 div 上，将其放在内容 div 的子级上。然后绝对定位该元素：

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

它还需要一个宽度和一个高度，内容 div 需要是位置：相对或绝对。如果您需要更详尽的示例，请直接说出来，我会写一个。

至于在底部切掉图像，你可能只是运气不好，除非你能保证你的内容高度会小于窗口的高度（你可能不能）。

【讨论】：

【解决方案2】：

使图像变得非常大并将其应用到 body 标签上，以便图像在您想要的位置。将其定位在左侧，但使其足够宽，以便正确定位，例如超过 960 像素，但甚至任何一侧，以便正确居中。

【讨论】：

...图像应该根据内容框的高度上下移动。在这种情况下，将其应用于 body 标签不起作用。
我不认为这是可能的

【解决方案3】：

为了使大小适合不同的浏览器，您可以设置背景图像，然后将左右边距设置为自动。这将使您的网站自动居中，并且无论浏览器更改多少，您的背景都会被切断。

body {
    background-image: whatever.jpg;
}

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

【讨论】：

...但是如果您降低浏览器窗口的高度，我需要将图像从底部截掉。
您可以尝试将高度设置为自动。

【解决方案4】：

绝对定位 bg-img。隐藏从图像创建的溢出。我会把它放在一个 div 中并设置样式。

【讨论】：

【解决方案5】：

感谢您的回答。我认为这不是完全可能的。我采用了一种不同的方法，将元素绝对定位在左下角。它现在位于左下角，当浏览器窗口变小时，它会与 content-div 重叠。

【讨论】：