CSS 背景图像与左下角对齐，而不强制滚动条
我有一个简单的网站：固定宽度，可变高度，居中。我希望背景图像与内容的左下角对齐，如下所示：
----------------------------------------------------------
____________________________
| <- 960px -> |
| |
| |
| |
| Content |
| |
| |
| |
----------| |
| ____________________________
| bg-img |
| |
------------
----------------------------------------------------------
如果浏览器窗口足够大，则整个背景图像应该可见。如果它较小，图像应该被切断，而不会强制水平或垂直滚动条。我不知道如何使水平和垂直的事情正确。有什么建议吗？ 多谢。
i have a simple website: fixed width, variable height, centered. I want a background image to align to the bottom left corner of the content like so:
----------------------------------------------------------
____________________________
| <- 960px -> |
| |
| |
| |
| Content |
| |
| |
| |
----------| |
| ____________________________
| bg-img |
| |
------------
----------------------------------------------------------
If the browser window is big enough the whole background image should be visible. If it's smaller, the image should get cut off without forcing horizontal or vertical scrollbars. I don't know how to get the horizontal AND vertical thing right. Any suggestions?
Thanks a lot.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
不要将背景放在内容 div 上，而应将其放在内容 div 的子级上。然后绝对定位该元素：
它还需要宽度和高度，并且内容 div 需要位置：相对或绝对。如果您需要更详尽的示例，请直接说出来，我会写一个。
至于在底部剪掉图像，你可能只是运气不好，除非你能保证你的内容高度将小于窗口的高度（你可能不能）。
Don't put the background on the content div, put it on a child of the content div. Then position that element absolutely:
It will also need a width and a height, and the content div will need to be position: relative or absolute. If you need a more thorough example, just say so, and I'll write one out.
As for cutting the image off at the bottom, you might just be out of luck, unless you can guarantee that your content height will be less than the height of the window (which you probably can't).
将图像设置得很大并将其应用到正文标记上，以便图像位于您想要的位置。将其放置在左侧中央，但使其足够宽，以便正确定位，例如超过 960 像素，甚至两侧，以便正确居中。
Make the image really big and apply it on the body tag so that the image is where you want it. Postion it center left but make it wide enough so that it is positioned correctly e.g. more than 960px but even either side so that it center properly.
为了获得适合不同浏览器的完美尺寸，您可以设置背景图像，然后将左右边距设置为自动。这将使您的网站进入自动中心，并允许您的背景被切断，无论浏览器发生多大变化。
In order to get the sizing perfect for different browsers, you can set a background image and then set the left and right margins to auto. This will get your website to auto center as well as allow your background to be cut-off no matter how much the browser is changed.
绝对定位 bg-img。隐藏从图像创建的溢出。我会把它放在 a 中并设置 div 的样式。
Absolutely position the bg-img. Hide overflow created from the image. I'd put it in a and style the div.
感谢您的回答。我认为这并不完全可能。我采用了不同的方法将元素绝对定位在左下角。它现在位于左下角，当浏览器窗口变小时，它会与内容 div 重叠。
Thanks for your answers. I think it's not entirely possible. I made a different approach positioning the element absolutely bottom left. It's now in the bottom left corner and gets overlapped by the content-div when the browser-window gets smaller.