Html 如何使背景图像滚动而不是平铺在页面上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17021647/
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 do I make a background image scroll and not be tiled on the page?
提问by ThunderToes
I have a background image for my website, and when I sourced the image in Html it tiles across the page and stops in the same place. How can I resize the image to fill the window and scroll down the page so that the text and stuff just appears to be travelling up the page? I've used the code in your answer and the image shows and isnt tiled but it repeats down the page instead of scrolling down?
我的网站有一个背景图片，当我在 Html 中获取图片时，它会在页面上平铺并停在同一个地方。如何调整图像大小以填充窗口并向下滚动页面，以便文本和内容看起来像在页面上移动？我已经在您的答案中使用了代码，图像显示并且没有平铺，但它会向下重复页面而不是向下滚动？
<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
There's the script I'm using.
这是我正在使用的脚本。
回答by acSlater
*Updatedwith jsFiddle: http://jsfiddle.net/q5WKg/1/
*使用 jsFiddle更新：http: //jsfiddle.net/q5WKg/1/
To stop the background from repeating you want to do in your CSS:
要阻止背景重复您想要在 CSS 中执行的操作：
background-repeat:no-repeat;
To have the background always fill use the css3 property:
要始终填充背景，请使用 css3 属性：
background-size: cover;
Because its not been widely implemented you will probably need to use vendor prefixes:
因为它没有被广泛实现，你可能需要使用供应商前缀：
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
In addition to your comments - in full it would look something like this:
除了您的评论 - 完整的内容如下：
<style type="text/css">
html
{
background-image: url('path/to/imagefile.jpg');
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
If your background image was on the html element.
如果您的背景图片在 html 元素上。
*Update 2
*更新2
I would correct your code above, move your style declaration in to the head of the document (although where you put it will work fine in most browsers) and remove any info regarding the background image from the body tag.
我会更正你上面的代码，将你的样式声明移到文档的头部（尽管你把它放在哪里在大多数浏览器中都可以正常工作）并从 body 标签中删除有关背景图像的任何信息。
Also the url you are providing is an absolute path to the file on your computer - you need to be using relative paths really, and not paths that are dependant on your computers file structure, I'm assuming that the HTML document is in the same folder as "Background copy.jpg". Therefore your code should read as follows:
此外，您提供的 url 是您计算机上文件的绝对路径 - 您确实需要使用相对路径，而不是依赖于您的计算机文件结构的路径，我假设 HTML 文档在相同文件夹为“背景副本.jpg”。因此，您的代码应如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
background: url('Background copy.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>
In addition to the updates to your code, I would change the name of any images you use to all be lowercase and to contain no spaces in their filenames - this will save you a lot of headache further down the line...
除了对您的代码进行更新之外，我还会将您使用的任何图像的名称更改为小写，并且在其文件名中不包含空格 - 这将为您节省很多麻烦……
If you want to better understand how HTML/CSS works, and how to structure them properly I would read up at w3cschools, they have the option to "try it yourself" on a lot of pages which means you can see how the code should be structured and test out different things with CSS & HTML.
如果您想更好地了解 HTML/CSS 的工作原理，以及如何正确构建它们，我会在 w3cschools 上阅读，他们可以选择在很多页面上“自己尝试”，这意味着您可以看到代码应该如何使用 CSS 和 HTML 构建和测试不同的东西。
w3schools css tutorials - http://www.w3schools.com/css/default.asp
w3schools css 教程 - http://www.w3schools.com/css/default.asp
回答by mishik
Probably this:
大概是这样的：
html {
background: url(images/your_file.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For IE - IE9+ only, other browsers - should work.
对于 IE - 仅 IE9+，其他浏览器 - 应该可以工作。
Much more info here: http://css-tricks.com/perfect-full-page-background-image/
这里有更多信息：http: //css-tricks.com/perfect-full-page-background-image/
P.S. You mightalso be interested in parallax.
PS您可能也对视差感兴趣。
回答by Kees Sonnema
Set a few options for your background-image:
为您的背景图片设置几个选项：
html,body{
background-image: url('your/image/path');
background-repeat: no-repeat;
background-size: cover; // this fills up the complete page.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Hope it helps!
希望能帮助到你！
回答by xThereon
https://css-tricks.com/perfect-full-page-background-image/
https://css-tricks.com/perfect-full-page-background-image/
In this site's version, it works perfectly. here's the code:
在本网站的版本中，它运行良好。这是代码：
html {
background: url("image.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
