Html 如何修复div内的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3534441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix background image inside div
提问by Latze
I've discovered a rather odd problem, which I think I know how to explain; i just don't know how to fix it!
我发现了一个相当奇怪的问题，我想我知道如何解释；我只是不知道如何解决它！
I have a page with a div#container (a div with 100% min-height (height for IE)) containing a header, a "page-content" and a footer. The background image of the div#container is supposed to be fixed (not fixed position but background-attachment: fixedwhich makes the picture follow when you scroll).
我有一个带有 div#container（一个具有 100% 最小高度（IE 的高度）的 div）的页面，其中包含一个页眉、一个“页面内容”和一个页脚。div#container 的背景图像应该是固定的（不是固定的位置，但是background-attachment: fixed当你滚动时它会跟随图片）。
The problem is, that when fixed attachment is added to the background-tag in CSS, the background picture is now positioned outside the div.
问题是，当固定附件添加到 CSS 中的背景标签时，背景图片现在位于 div 之外。
The CSS is as follows: (without background-attachment: fixed;)
CSS如下：（没有background-attachment: fixed;）
div#container {
position:relative;
width:900px;
margin:0 auto;
background-color: #ccffff;
background-image: url("pics/sign.jpg");
background-repeat: no-repeat;
background-position: right top;
height:auto !important;
height:100%;
min-height:100%;
}
margin:0 auto;is to center the div and the !importantthing in the first height:is to make IE ignore that particular height-tag. This is required if min-height: 100%should work.
margin:0 auto;是将 div 居中!important，第一个height:是让 IE 忽略那个特定的高度标签。如果min-height: 100%应该工作，这是必需的。
When I add this...
当我添加这个...
div#container {
position:relative;
width:900px;
margin:0 auto;
background-color: #ccffff;
background-image: url("pics/sign.jpg");
background-attachment: fixed; //This is what is added to the code-sample
background-repeat: no-repeat;
background-position: right top;
height:auto !important;
height:100%;
min-height:100%;
}
...the background picture is moving outside of the div. Let me explain this: The only visible part of the background image is what is still inside the <div id="container">but a part of the image has moved outside the div and is now invisible.
...背景图片移动到 div 之外。让我解释一下：背景图像唯一可见的部分仍然在里面，<div id="container">但图像的一部分已经移到了 div 之外，现在不可见了。
To sum up...
总结...
When the background image is fixed, the background image is partly hidden, moving outside the div. The image is positioning to the top right of the browser window, not to the top right of the div.
当背景图像固定时，背景图像部分隐藏，移动到 div 之外。图像定位在浏览器窗口的右上角，而不是 div 的右上角。
Hope you guys can help me!
希望大家帮帮我！
采纳答案by Ryan Kinal
This behavior is actually correct. Any background which is attachment: fixedwill be relative to the viewport, not the element it is applied to. This is actually the basis of Eric Meyer's Complex Spiraldemo.
这种行为实际上是正确的。任何背景都attachment: fixed将相对于视口，而不是应用到的元素。这实际上是 Eric Meyer 的Complex Spiral演示的基础。
回答by Matt Healey
While you cannot have a fixed background position within a div, the easiest solution would be to create a div the size of your image. Make the image the background, and set it to position:absolutein the top right corner of the div you want it placed in using right:0px;top:0px. Be sure that the parent div is position:relativeor it won't be positioned absolutely within that div.
虽然在 div 中不能有固定的背景位置，但最简单的解决方案是创建一个与图像大小相同的 div。将图像设为背景，并将position:absolute其设置为使用right:0px;top:0px. 确保父 divposition:relative或它不会绝对定位在该 div 内。
回答by guillaume
You should try adding the background-originproperty, maybe the border-boxvalue will solve your problem. Also you might want to define background-size, keep in mind coverand containare supported and very useful.
您应该尝试添加该background-origin属性，也许该border-box值会解决您的问题。此外，您可能想要定义background-size、记住cover并contain得到支持并且非常有用。
