Html 防止背景图像在 CSS 中移动或平铺
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12941270/
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
Keep a background image from moving or tiling in CSS
提问by user1754205
I'm trying to get a background that remains stationary while the text scrolls over it and also centering the image and keeping it from tiling or repeating. As it stands now I can get it to either but not both. Currently my style sheet handles it this way.
我试图让背景在文本滚动时保持静止，并将图像居中并防止其平铺或重复。就目前而言，我可以将其用于任何一个，但不能同时用于两者。目前我的样式表以这种方式处理它。
{
background: url(LOCATION OF PIC FILE) repeat fixed;
height: 610px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
As far as I can tell the height: 610px; limits how far the text can scroll up, which I would like to remain. I have tried to change the "repeat fixed" part and am not getting the results I'd like. I have tried this...
据我所知高度：610px；限制文本可以向上滚动的距离，我想保留。我试图更改“重复修复”部分，但没有得到我想要的结果。我试过这个...
{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 610px;
}
... with this in the HTML..
...在HTML中使用这个..
<div id="intro">
<img src="IMAGE SOURCE" width="100%" height="100%">
</div>
but this doesn't keep the background fixed...
但这并不能保持背景固定......
any help would be appreciated.
任何帮助，将不胜感激。
回答by Paula C
After taking a look at your CSS, I've noticed a number of conflicts that can be fixed with a little tweaking. First off, I definitely suggest that you use a browser web development tool (ex. Firebug) to make the changes and tweaks. I find it saves your patience and frustration.
在查看您的 CSS 后，我注意到一些冲突可以通过稍加调整来修复。首先，我绝对建议您使用浏览器 Web 开发工具（例如 Firebug）进行更改和调整。我发现它可以节省您的耐心和沮丧。
The solution I came upon is, as follows:
我遇到的解决方案如下：
.body{
background-image: url('../images/go_here.png');
background-repeat:repeat-x;
background-attachment:fixed;
background-position: left top;
position:absolute;
height:610px
width: ?px;
margin:0;
}
If you want the background to repeat horizontally, then use background-repeat: x-axis; vertically, background-repeat: y-axis;. In order to make sure the background doesn't scroll,use background-attachment: fixed;. The background-position should either use two words or two numeric measurements (ex.center center/left top/ right top/right center/left center/bottom right or 0px 0px). Since you want the background to have a height, and I'm assuming a width; the position of the element needs to be absolute. If you decide to work with floats, the main container or background needs to be absolute.
如果您希望背景水平重复，则使用 background-repeat: x-axis; 垂直，背景重复：y 轴；。为了确保背景不会滚动，请使用 background-attachment: fixed;。背景位置应该使用两个词或两个数字度量（例如中心中心/左上/右上/右中心/左中心/右下或 0px 0px）。由于您希望背景具有高度，因此我假设了宽度；元素的位置需要是绝对的。如果您决定使用浮动，则主容器或背景需要是绝对的。
My suggestion is if you would like keep the text attached to the background, that's up to you. I've found in my experience that it's best to separate the text from the background. It just leads to less headaches in the long run. I would code the text as follows:
我的建议是，您是否希望将文本附加到背景中，这取决于您。根据我的经验，我发现最好将文本与背景分开。从长远来看，它只会减少头痛。我将文本编码如下：
.text{
text-align: center;
overflow: hidden;
height: 610?px;
width: ?px;
}
As for the usage of img src and background-image, in my experience, I've found that they conflict. For some weird reason, the img src tag will not work unless there is a word or a phrase outside of the tags. By using both, the img src will override the background css element. I've found that img tags are harder to manipulate in CSS. It's doable, but a nightmare to execute.
至于img src和background-image的使用，以我的经验，我发现它们是有冲突的。由于某些奇怪的原因，img src 标签将不起作用，除非标签之外有一个词或短语。通过使用两者，img src 将覆盖背景 css 元素。我发现 img 标签在 CSS 中更难操作。这是可行的，但执行起来是一场噩梦。
Example:
例子：
<div><img src="http://www.example.com">Example</div>
In my experience, I've found that img src works hand in hand with text-indent: -9999px; or display:none;. The tag won't work unless it has a word or element to attach itself to. Text-indent causes the word (ie. Example) to be pushed off screen. Display: none; causes the word to appear invisible but it appears over the image if highlighted. (I apologize if that doesn't make sense. I can always clarify.)
根据我的经验，我发现 img src 与 text-indent: -9999px; 协同工作。或显示：无；。除非有一个词或元素可以附加到标签上，否则它不会工作。文本缩进导致单词（即示例）被推出屏幕。显示：无；使单词看起来不可见，但如果突出显示，它会出现在图像上。（如果这没有意义，我深表歉意。我总是可以澄清。）
As for the HTML markup, I would either use the img tag or just the div tag. The HTML markup:
至于 HTML 标记，我要么使用 img 标签，要么只使用 div 标签。HTML 标记：
<html>
<body>
<div class="text">I put my text here.</text>
</body>
</html>
Let me know if this works. I apologize that this became so long. I didn't intend for that. If you run into any problems or if you need more clarification, let me know. I don't mind helping out.
让我知道这个是否奏效。我很抱歉这变得这么长。我不是故意的。如果您遇到任何问题或需要更多说明，请告诉我。我不介意帮忙。
回答by WalterKPhillips
Try the following. Please note the addition of no-repeatand background-size:
请尝试以下操作。请注意添加no-repeat和background-size：
{
background: url(LOCATION OF PIC FILE) no-repeat;
background-size: cover;
height: 610px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
回答by puddleJumper
I think what you are missing is that you have
我认为你缺少的是你拥有
overflow: hidden;
on your background not allowing the div to scroll unless you have those switched on which one belongs to which in your css.
在你的背景上不允许 div 滚动，除非你在你的 css 中打开了哪个属于哪个。
if you want the overflow to be hidden on your div then that is fine but it will put scroll bars on it.
如果您希望将溢出隐藏在您的 div 上，那很好，但它会在其上放置滚动条。
回答by mkob
.whateverclassyouwant{background: (url) fixed center no-repeat; margin:0 auto; height:auto}
should work
应该管用
