CSS 如何在左下角保持背景图像甚至滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3243236/
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 keep background image on bottom left even scrolling
提问by FlyingCat
I was wondering if there is a way to keep my background image on bottom left all the time even if the user scroll the browser. My current css can make the image in the bottom of the browser when the site loaded, but if I scroll the browser, it will still stay in the same location. I appreciate any help.
我想知道是否有办法让我的背景图像始终保持在左下角，即使用户滚动浏览器也是如此。我当前的 css 可以在网站加载时在浏览器底部制作图像，但是如果我滚动浏览器，它仍然会停留在相同的位置。我很感激任何帮助。
html, body
{
background-image:url("backgroundBottom.png");
background-position:bottom left;
background-repeat:no-repeat;
background-attachement:fixed; //I just add this, don't think this would work.
font-family:"Georgia, self";
font-size:"30px";
margin:0px;
height:100%;
text-align:center;
}
回答by Marko
You're setting the background on both the HTML & BODY elements.
您正在为 HTML 和 BODY 元素设置背景。
The code looks good, background-attachment: fixed is what you need.
代码看起来不错，背景附件：固定是你需要的。
So in shorthand CSS, just write
所以在速记 CSS 中，只需写
body {
background: url(backgroundBottom.png) bottom left no-repeat fixed;
}
回答by Chase Florell
if it is a fixed image with no repeat, I would recommend putting it in it's own div tag that is exactly the same width and height as the image.
如果它是一个没有重复的固定图像，我建议将它放在它自己的 div 标签中，该标签与图像的宽度和高度完全相同。
<div id="BackgroundImage"></div>
Then use the following CSS
然后使用以下CSS
#BackgroundImage{position: fixed; width="xx"; height="yy"; bottom:0px; left:0px;}
obviously customized to your needs
显然是根据您的需求定制的
The main point is position:fixed
重点是 position:fixed
Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
生成相对于浏览器窗口定位的绝对定位元素。元素的位置由“left”、“top”、“right”和“bottom”属性指定
回答by Dan
you used background-attach*e*ment:fixed;
你使用了背景附加*e*ment:fixed;
try spelling it better like background-attachment:fixed;
试着把它拼写得更好，比如 background-attachment:fixed;
